@nocobase/flow-engine 2.0.0-alpha.2

package/lib/components/FlowErrorFallback.js

@@ -0,0 +1,264 @@
+/**
+ * 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 FlowErrorFallback_exports = {};
+__export(FlowErrorFallback_exports, {
+  FlowErrorFallback: () => FlowErrorFallback,
+  FlowErrorFallbackModal: () => FlowErrorFallbackModal
+});
+module.exports = __toCommonJS(FlowErrorFallback_exports);
+var import_antd = require("antd");
+var import_react = __toESM(require("react"));
+var import_useFlowModel = require("../hooks/useFlowModel");
+var import_utils = require("../utils");
+const { Paragraph, Text } = import_antd.Typography;
+const FlowErrorFallbackInner = /* @__PURE__ */ __name(({ error, resetErrorBoundary }) => {
+  var _a;
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const model = (0, import_useFlowModel.useFlowModel)();
+  const t = (0, import_utils.getT)(model);
+  const handleCopyError = /* @__PURE__ */ __name(async () => {
+    setLoading(true);
+    try {
+      const errorInfo = {
+        message: error.message,
+        stack: error.stack,
+        modelInfo: model ? {
+          uid: model.uid,
+          className: model.constructor.name,
+          props: model.props,
+          stepParams: model.stepParams
+        } : null,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      await navigator.clipboard.writeText(JSON.stringify(errorInfo, null, 2));
+      console.log("Error information copied to clipboard");
+    } catch (err) {
+      console.error("Failed to copy error information:", err);
+    }
+    setLoading(false);
+  }, "handleCopyError");
+  const canDownloadLogs = (_a = model == null ? void 0 : model.context) == null ? void 0 : _a.api;
+  const handleDownloadLogs = /* @__PURE__ */ __name(async () => {
+    if (!canDownloadLogs) {
+      console.error("API client not available");
+      return;
+    }
+    setLoading(true);
+    try {
+      const apiClient = model.context.api;
+      const location = {
+        pathname: window.location.pathname,
+        search: window.location.search,
+        hash: window.location.hash,
+        href: window.location.href
+      };
+      const res = await apiClient.request({
+        url: "logger:collect",
+        method: "post",
+        responseType: "blob",
+        data: {
+          error: {
+            message: error.message,
+            stack: error.stack
+          },
+          location,
+          modelInfo: model ? {
+            uid: model.uid,
+            className: model.constructor.name,
+            props: model.props,
+            stepParams: model.stepParams
+          } : null
+        }
+      });
+      const url = window.URL.createObjectURL(new Blob([res.data], { type: "application/gzip" }));
+      const link = document.createElement("a");
+      link.setAttribute("href", url);
+      link.setAttribute("download", "logs.tar.gz");
+      link.click();
+      link.remove();
+      window.URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error("Failed to download logs:", err);
+    }
+    setLoading(false);
+  }, "handleDownloadLogs");
+  const subTitle = /* @__PURE__ */ import_react.default.createElement("span", null, t("This is likely a NocoBase internals bug. Please open an issue at"), " ", /* @__PURE__ */ import_react.default.createElement("a", { href: "https://github.com/nocobase/nocobase/issues", target: "_blank", rel: "noopener noreferrer" }, t("here")), model && /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: "8px", fontSize: "12px", color: "#999" } }, "Model: ", model.constructor.name, " (uid: ", model.uid, ")"));
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { backgroundColor: "white" } }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Result,
+    {
+      style: { maxWidth: "60vw", margin: "auto" },
+      status: "error",
+      title: t("Render failed"),
+      subTitle,
+      extra: [
+        /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "primary", key: "feedback", href: "https://github.com/nocobase/nocobase/issues", target: "_blank" }, t("Feedback")),
+        canDownloadLogs && /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { key: "log", loading, onClick: handleDownloadLogs }, t("Download logs")),
+        /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { key: "copy", loading, onClick: handleCopyError }, t("Copy error info")),
+        resetErrorBoundary && /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { key: "retry", danger: true, onClick: resetErrorBoundary }, t("Try again"))
+      ].filter(Boolean)
+    },
+    /* @__PURE__ */ import_react.default.createElement(Paragraph, { copyable: { text: error.stack } }, /* @__PURE__ */ import_react.default.createElement(Text, { type: "danger", style: { whiteSpace: "pre-line", textAlign: "center" } }, error.stack))
+  ));
+}, "FlowErrorFallbackInner");
+const FlowErrorFallback = /* @__PURE__ */ __name(({ error, resetErrorBoundary }) => {
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  try {
+    return /* @__PURE__ */ import_react.default.createElement(FlowErrorFallbackInner, { error, resetErrorBoundary });
+  } catch {
+    const handleCopyError = /* @__PURE__ */ __name(async () => {
+      setLoading(true);
+      try {
+        const errorInfo = {
+          message: error.message,
+          stack: error.stack,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        await navigator.clipboard.writeText(JSON.stringify(errorInfo, null, 2));
+        console.log("Error information copied to clipboard");
+      } catch (err) {
+        console.error("Failed to copy error information:", err);
+      }
+      setLoading(false);
+    }, "handleCopyError");
+    const subTitle = /* @__PURE__ */ import_react.default.createElement("span", null, "This is likely a NocoBase internals bug. Please open an issue at ", /* @__PURE__ */ import_react.default.createElement("a", { href: "https://github.com/nocobase/nocobase/issues", target: "_blank", rel: "noopener noreferrer" }, "here"));
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { backgroundColor: "white" } }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Result,
+      {
+        style: { maxWidth: "60vw", margin: "auto" },
+        status: "error",
+        title: "Render failed",
+        subTitle,
+        extra: [
+          /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "primary", key: "feedback", href: "https://github.com/nocobase/nocobase/issues", target: "_blank" }, "Feedback"),
+          /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { key: "copy", loading, onClick: handleCopyError }, "Copy error info"),
+          resetErrorBoundary && /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { key: "retry", danger: true, onClick: resetErrorBoundary }, "Try again")
+        ].filter(Boolean)
+      },
+      /* @__PURE__ */ import_react.default.createElement(Paragraph, { copyable: { text: error.stack } }, /* @__PURE__ */ import_react.default.createElement(Text, { type: "danger", style: { whiteSpace: "pre-line", textAlign: "center" } }, error.stack))
+    ));
+  }
+}, "FlowErrorFallback");
+const FlowErrorFallbackModal = /* @__PURE__ */ __name(({
+  error,
+  resetErrorBoundary,
+  children
+}) => {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const defaultChildren = /* @__PURE__ */ import_react.default.createElement(
+    Paragraph,
+    {
+      style: {
+        display: "flex",
+        marginBottom: 0
+      },
+      copyable: { text: error.message }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      Text,
+      {
+        type: "danger",
+        style: {
+          whiteSpace: "nowrap",
+          textOverflow: "ellipsis",
+          overflow: "hidden",
+          display: "inline-block",
+          maxWidth: "200px"
+        }
+      },
+      "Error: ",
+      error.message
+    )
+  );
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { onMouseOver: () => setOpen(true) }, children || defaultChildren), open && /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1e4
+      },
+      onClick: () => setOpen(false)
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          backgroundColor: "#fff",
+          borderRadius: "8px",
+          padding: "24px",
+          maxWidth: "60vw",
+          maxHeight: "80vh",
+          overflow: "auto",
+          position: "relative"
+        },
+        onClick: (e) => e.stopPropagation()
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          style: {
+            position: "absolute",
+            top: "8px",
+            right: "12px",
+            background: "none",
+            border: "none",
+            fontSize: "18px",
+            cursor: "pointer",
+            color: "#999"
+          },
+          onClick: () => setOpen(false)
+        },
+        "\xD7"
+      ),
+      /* @__PURE__ */ import_react.default.createElement(FlowErrorFallback, { error, resetErrorBoundary })
+    )
+  ));
+}, "FlowErrorFallbackModal");
+FlowErrorFallback.Modal = FlowErrorFallbackModal;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FlowErrorFallback,
+  FlowErrorFallbackModal
+});

package/lib/components/FlowModelRenderer.d.ts

@@ -0,0 +1,64 @@
+/**
+ * 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 from 'react';
+import { FlowModel } from '../models';
+import { ToolbarItemConfig } from '../types';
+export interface FlowModelRendererProps {
+    model?: FlowModel;
+    uid?: string;
+    fallback?: React.ReactNode;
+    key?: React.Key;
+    /** 是否显示流程设置入口（如按钮、菜单等） */
+    showFlowSettings?: boolean | {
+        showBackground?: boolean;
+        showBorder?: boolean;
+        showDragHandle?: boolean;
+        /** 自定义工具栏样式 */
+        style?: React.CSSProperties;
+        /**
+         * @default 'inside'
+         */
+        toolbarPosition?: 'inside' | 'above';
+    };
+    /** 流程设置的交互风格 */
+    flowSettingsVariant?: 'dropdown' | 'contextMenu' | 'modal' | 'drawer';
+    /** 是否在设置中隐藏移除按钮 */
+    hideRemoveInSettings?: boolean;
+    /** 是否在边框左上角显示模型title，默认 false */
+    showTitle?: boolean;
+    /** 是否跳过自动应用流程，默认 false */
+    skipApplyAutoFlows?: boolean;
+    /** 当 skipApplyAutoFlows !== false 时，传递给 useApplyAutoFlows 的额外上下文 */
+    inputArgs?: Record<string, any>;
+    /** 是否在最外层包装 FlowErrorFallback 组件，默认 false */
+    showErrorFallback?: boolean;
+    /** 设置菜单层级：1=仅当前模型(默认)，2=包含子模型 */
+    settingsMenuLevel?: number;
+    /** 额外的工具栏项目，仅应用于此实例 */
+    extraToolbarItems?: ToolbarItemConfig[];
+}
+/**
+ * A React component responsible for rendering a FlowModel.
+ * It delegates the actual rendering logic to the `render` method of the provided model.
+ *
+ * @param {FlowModelRendererProps} props - The component's props.
+ * @param {FlowModel} props.model - The FlowModel instance to render.
+ * @param {string} props.uid - The unique identifier for the flow model.
+ * @param {boolean} props.showFlowSettings - Whether to show flow settings entry (buttons, menus, etc.).
+ * @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 {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.
+ */
+export declare const FlowModelRenderer: React.FC<FlowModelRendererProps>;
+export declare const MemoFlowModelRenderer: React.NamedExoticComponent<FlowModelRendererProps>;

package/lib/components/FlowModelRenderer.js

@@ -0,0 +1,254 @@
+/**
+ * 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 FlowModelRenderer_exports = {};
+__export(FlowModelRenderer_exports, {
+  FlowModelRenderer: () => FlowModelRenderer,
+  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");
+var import_hooks = require("../hooks");
+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)(
+  ({
+    model,
+    showFlowSettings,
+    flowSettingsVariant,
+    hideRemoveInSettings,
+    showTitle,
+    inputArgs,
+    showErrorFallback,
+    settingsMenuLevel,
+    extraToolbarItems,
+    fallback
+  }) => {
+    const { loading: pending, error: autoFlowsError } = (0, import_hooks.useApplyAutoFlows)(model, inputArgs, { throwOnError: false });
+    (0, import_utils.setAutoFlowError)(model, autoFlowsError || null);
+    if (pending) {
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, fallback);
+    }
+    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 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)(
+  ({
+    model,
+    showFlowSettings,
+    flowSettingsVariant,
+    hideRemoveInSettings,
+    showTitle,
+    showErrorFallback,
+    settingsMenuLevel,
+    extraToolbarItems
+  }) => {
+    const wrapWithErrorBoundary = /* @__PURE__ */ __name((children) => {
+      if (showErrorFallback) {
+        return /* @__PURE__ */ import_react.default.createElement(import_react_error_boundary.ErrorBoundary, { FallbackComponent: import_FlowErrorFallback.FlowErrorFallback }, children);
+      }
+      return children;
+    }, "wrapWithErrorBoundary");
+    const ContentOrError = /* @__PURE__ */ __name(() => {
+      const autoError = (0, import_utils.getAutoFlowError)(model);
+      if (autoError) {
+        throw autoError;
+      }
+      const rendered = model.render();
+      if (typeof rendered === "function") {
+        return import_react.default.createElement(rendered);
+      }
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, rendered);
+    }, "ContentOrError");
+    if (!showFlowSettings) {
+      return wrapWithErrorBoundary(/* @__PURE__ */ import_react.default.createElement(ContentOrError, null));
+    }
+    switch (flowSettingsVariant) {
+      case "dropdown":
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_FlowsFloatContextMenu.FlowsFloatContextMenu,
+          {
+            showTitle,
+            model,
+            showDeleteButton: !hideRemoveInSettings,
+            showBackground: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.showBackground : void 0,
+            showBorder: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.showBorder : void 0,
+            showDragHandle: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.showDragHandle : void 0,
+            settingsMenuLevel,
+            extraToolbarItems,
+            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))
+        );
+      case "contextMenu":
+        return /* @__PURE__ */ import_react.default.createElement(import_FlowsContextMenu.FlowsContextMenu, { model, showDeleteButton: !hideRemoveInSettings }, wrapWithErrorBoundary(/* @__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));
+      case "drawer":
+        console.warn("FlowModelRenderer: drawer variant is not implemented yet");
+        return wrapWithErrorBoundary(/* @__PURE__ */ import_react.default.createElement(ContentOrError, null));
+      default:
+        console.warn(
+          `FlowModelRenderer: Unknown flowSettingsVariant '${flowSettingsVariant}', falling back to dropdown`
+        );
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_FlowsFloatContextMenu.FlowsFloatContextMenu,
+          {
+            showTitle,
+            model,
+            showDeleteButton: !hideRemoveInSettings,
+            showBackground: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.showBackground : void 0,
+            showBorder: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.showBorder : void 0,
+            showDragHandle: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.showDragHandle : void 0,
+            settingsMenuLevel,
+            extraToolbarItems,
+            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))
+        );
+    }
+  },
+  {
+    displayName: "FlowModelRendererCore"
+  }
+);
+const FlowModelRenderer = (0, import_reactive_react.observer)(
+  ({
+    model,
+    fallback = /* @__PURE__ */ import_react.default.createElement(import_antd.Skeleton.Button, { size: "small" }),
+    showFlowSettings = false,
+    flowSettingsVariant = "dropdown",
+    hideRemoveInSettings = false,
+    showTitle = false,
+    skipApplyAutoFlows = false,
+    inputArgs,
+    showErrorFallback = true,
+    settingsMenuLevel,
+    extraToolbarItems
+  }) => {
+    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(
+      FlowModelRendererWithAutoFlows,
+      {
+        model,
+        showFlowSettings,
+        flowSettingsVariant,
+        hideRemoveInSettings,
+        showTitle,
+        inputArgs,
+        showErrorFallback,
+        settingsMenuLevel,
+        extraToolbarItems,
+        fallback
+      }
+    );
+    if (showErrorFallback) {
+      return /* @__PURE__ */ import_react.default.createElement(import_hooks.FlowModelProvider, { model }, /* @__PURE__ */ import_react.default.createElement(import_react_error_boundary.ErrorBoundary, { FallbackComponent: import_FlowErrorFallback.FlowErrorFallback }, content));
+    }
+    return content;
+  }
+);
+const MemoFlowModelRenderer = import_react.default.memo(FlowModelRenderer);
+MemoFlowModelRenderer.displayName = "MemoFlowModelRenderer";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FlowModelRenderer,
+  MemoFlowModelRenderer
+});

package/lib/components/FormItem.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 from 'react';
+import type { FormItemProps } from 'antd';
+type ChildExtraProps = Record<string, any>;
+interface ExtendedFormItemProps extends FormItemProps {
+    labelWidth?: number | string;
+    labelWrap?: boolean;
+    showLabel?: boolean;
+}
+export declare const FormItem: ({ children, showLabel, labelWidth, ...rest }: ExtendedFormItemProps & ChildExtraProps) => React.JSX.Element;
+export {};