@nocobase/flow-engine 2.1.0-alpha.4 → 2.1.0-alpha.40

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

@@ -7,18 +7,47 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 import { DndContextProps } from '@dnd-kit/core';
+import type { Transform } from '@dnd-kit/utilities';
 import React, { FC } from 'react';
 import { FlowModel } from '../../models';
 import { PersistOptions } from '../../types';
 export * from './findModelUidPosition';
 export * from './gridDragPlanner';
 export declare const EMPTY_COLUMN_UID = "EMPTY_COLUMN";
+export declare const TOOLBAR_DRAG_ACTIVITY_EVENT = "nb-toolbar-drag-activity";
+type ToolbarDragAnchorPoint = {
+    x: number;
+    y: number;
+};
+export declare const resolveOverlayAnchorTransform: ({ activeId, active, transform, activeNodeRect, dragAnchorPoint, }: {
+    activeId: string | null;
+    active: {
+        id: string | number;
+    } | null | undefined;
+    transform: Transform;
+    activeNodeRect: {
+        top: number;
+        left: number;
+    } | null;
+    dragAnchorPoint: ToolbarDragAnchorPoint | null;
+}) => Transform;
 export declare const DragHandler: FC<{
     model: FlowModel;
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }>;
 export declare const Droppable: FC<{
     model: FlowModel<any>;
     children: React.ReactNode;
 }>;
-export declare const DndProvider: FC<DndContextProps & PersistOptions>;
+export interface DndProviderProps extends DndContextProps, PersistOptions {
+    /**
+     * Whether to render the built-in `DragOverlay` (the "Dragging" pill that
+     * follows the cursor). Defaults to `true` for backwards compatibility with
+     * existing flow-engine drag interactions. Set to `false` when the
+     * surrounding UI already gives clear visual feedback (e.g. a drag-sort
+     * table that highlights the drop position) and the floating pill would be
+     * redundant.
+     */
+    showDragOverlay?: boolean;
+}
+export declare const DndProvider: FC<DndProviderProps>;

package/lib/components/dnd/index.js

@@ -41,7 +41,9 @@ __export(dnd_exports, {
   DndProvider: () => DndProvider,
   DragHandler: () => DragHandler,
   Droppable: () => Droppable,
-  EMPTY_COLUMN_UID: () => EMPTY_COLUMN_UID
+  EMPTY_COLUMN_UID: () => EMPTY_COLUMN_UID,
+  TOOLBAR_DRAG_ACTIVITY_EVENT: () => TOOLBAR_DRAG_ACTIVITY_EVENT,
+  resolveOverlayAnchorTransform: () => resolveOverlayAnchorTransform
 });
 module.exports = __toCommonJS(dnd_exports);
 var import_icons = require("@ant-design/icons");
@@ -52,17 +54,186 @@ var import_provider = require("../../provider");
 __reExport(dnd_exports, require("./findModelUidPosition"), module.exports);
 __reExport(dnd_exports, require("./gridDragPlanner"), module.exports);
 const EMPTY_COLUMN_UID = "EMPTY_COLUMN";
+const TOOLBAR_DRAG_ACTIVITY_EVENT = "nb-toolbar-drag-activity";
+const TOOLBAR_DRAG_ANCHOR_EVENT = "nb-toolbar-drag-anchor";
+const MENU_SUBMENU_POPUP_SELECTOR = ".ant-menu-submenu-popup";
+const resolveOverlayAnchorTransform = /* @__PURE__ */ __name(({
+  activeId,
+  active,
+  transform,
+  activeNodeRect,
+  dragAnchorPoint
+}) => {
+  if (!activeId || (active == null ? void 0 : active.id) !== activeId || !dragAnchorPoint || !activeNodeRect) {
+    return transform;
+  }
+  return {
+    ...transform,
+    x: transform.x + dragAnchorPoint.x - activeNodeRect.left,
+    y: transform.y + dragAnchorPoint.y - activeNodeRect.top
+  };
+}, "resolveOverlayAnchorTransform");
+const resolveDraggableHostNode = /* @__PURE__ */ __name((activatorNode) => {
+  const ownerDocument = activatorNode == null ? void 0 : activatorNode.ownerDocument;
+  const floatToolbarContainer = activatorNode == null ? void 0 : activatorNode.closest(".nb-toolbar-container[data-model-uid]");
+  const toolbarModelUid = floatToolbarContainer == null ? void 0 : floatToolbarContainer.getAttribute("data-model-uid");
+  if (!ownerDocument || !toolbarModelUid) {
+    return activatorNode;
+  }
+  const matchedHosts = Array.from(
+    ownerDocument.querySelectorAll(
+      `[data-has-float-menu="true"][data-float-menu-model-uid="${toolbarModelUid}"]`
+    )
+  );
+  const popupRoot = floatToolbarContainer == null ? void 0 : floatToolbarContainer.closest(MENU_SUBMENU_POPUP_SELECTOR);
+  if (popupRoot) {
+    return matchedHosts.find((hostNode) => hostNode.closest(MENU_SUBMENU_POPUP_SELECTOR) === popupRoot) || activatorNode;
+  }
+  return matchedHosts.find((hostNode) => !hostNode.closest(MENU_SUBMENU_POPUP_SELECTOR)) || matchedHosts[0] || activatorNode;
+}, "resolveDraggableHostNode");
 const DragHandler = /* @__PURE__ */ __name(({
   model,
   children = /* @__PURE__ */ import_react.default.createElement(import_icons.DragOutlined, null)
 }) => {
-  const { attributes, listeners, setNodeRef } = (0, import_core.useDraggable)({ id: model.uid });
+  const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef } = (0, import_core.useDraggable)({ id: model.uid });
+  const dragHandlerRef = (0, import_react.useRef)(null);
+  const draggableNodeRef = (0, import_react.useRef)(null);
+  const pointerPressCleanupRef = (0, import_react.useRef)(null);
+  const isDraggingRef = (0, import_react.useRef)(isDragging);
+  const isPointerPressActiveRef = (0, import_react.useRef)(false);
+  const isToolbarDragActiveRef = (0, import_react.useRef)(false);
+  const syncDraggableNodeRef = (0, import_react.useCallback)(
+    (activatorNode) => {
+      const nextNode = resolveDraggableHostNode(activatorNode);
+      if (draggableNodeRef.current === nextNode) {
+        return;
+      }
+      draggableNodeRef.current = nextNode;
+      setNodeRef(nextNode);
+    },
+    [setNodeRef]
+  );
+  const setDragHandlerNodeRef = (0, import_react.useCallback)(
+    (node) => {
+      dragHandlerRef.current = node;
+      setActivatorNodeRef(node);
+      syncDraggableNodeRef(node);
+    },
+    [setActivatorNodeRef, syncDraggableNodeRef]
+  );
+  const dispatchToolbarDragActivity = (0, import_react.useCallback)(
+    (active) => {
+      var _a;
+      const ownerDocument = (_a = dragHandlerRef.current) == null ? void 0 : _a.ownerDocument;
+      if (!ownerDocument) {
+        return;
+      }
+      ownerDocument.dispatchEvent(
+        new CustomEvent(TOOLBAR_DRAG_ACTIVITY_EVENT, {
+          detail: { active, modelUid: model.uid }
+        })
+      );
+    },
+    [model.uid]
+  );
+  const dispatchToolbarDragAnchor = (0, import_react.useCallback)(
+    (detail) => {
+      var _a;
+      const ownerDocument = (_a = dragHandlerRef.current) == null ? void 0 : _a.ownerDocument;
+      if (!ownerDocument) {
+        return;
+      }
+      ownerDocument.dispatchEvent(
+        new CustomEvent(TOOLBAR_DRAG_ANCHOR_EVENT, {
+          detail: { modelUid: model.uid, point: detail.point }
+        })
+      );
+    },
+    [model.uid]
+  );
+  const clearPointerPressListeners = (0, import_react.useCallback)(() => {
+    var _a;
+    (_a = pointerPressCleanupRef.current) == null ? void 0 : _a.call(pointerPressCleanupRef);
+    pointerPressCleanupRef.current = null;
+  }, []);
+  const syncToolbarDragActivity = (0, import_react.useCallback)(() => {
+    const nextActive = isPointerPressActiveRef.current || isDraggingRef.current;
+    if (nextActive === isToolbarDragActiveRef.current) {
+      return;
+    }
+    isToolbarDragActiveRef.current = nextActive;
+    dispatchToolbarDragActivity(nextActive);
+  }, [dispatchToolbarDragActivity]);
+  const handlePointerPressEnd = (0, import_react.useCallback)(() => {
+    isPointerPressActiveRef.current = false;
+    clearPointerPressListeners();
+    syncToolbarDragActivity();
+  }, [clearPointerPressListeners, syncToolbarDragActivity]);
+  const registerPointerPressListeners = (0, import_react.useCallback)(() => {
+    var _a;
+    const ownerDocument = (_a = dragHandlerRef.current) == null ? void 0 : _a.ownerDocument;
+    const ownerWindow = ownerDocument == null ? void 0 : ownerDocument.defaultView;
+    if (!ownerDocument) {
+      return;
+    }
+    clearPointerPressListeners();
+    const handlePointerEnd = /* @__PURE__ */ __name(() => {
+      handlePointerPressEnd();
+    }, "handlePointerEnd");
+    const handleKeyDown = /* @__PURE__ */ __name((event) => {
+      if (event.key === "Escape") {
+        handlePointerPressEnd();
+      }
+    }, "handleKeyDown");
+    ownerDocument.addEventListener("pointerup", handlePointerEnd, true);
+    ownerDocument.addEventListener("pointercancel", handlePointerEnd, true);
+    ownerDocument.addEventListener("keydown", handleKeyDown, true);
+    ownerWindow == null ? void 0 : ownerWindow.addEventListener("blur", handlePointerEnd);
+    pointerPressCleanupRef.current = () => {
+      ownerDocument.removeEventListener("pointerup", handlePointerEnd, true);
+      ownerDocument.removeEventListener("pointercancel", handlePointerEnd, true);
+      ownerDocument.removeEventListener("keydown", handleKeyDown, true);
+      ownerWindow == null ? void 0 : ownerWindow.removeEventListener("blur", handlePointerEnd);
+    };
+  }, [clearPointerPressListeners, handlePointerPressEnd]);
+  (0, import_react.useEffect)(() => {
+    syncDraggableNodeRef(dragHandlerRef.current);
+  }, [syncDraggableNodeRef]);
+  (0, import_react.useEffect)(() => {
+    isDraggingRef.current = isDragging;
+    syncToolbarDragActivity();
+  }, [isDragging, syncToolbarDragActivity]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (isToolbarDragActiveRef.current) {
+        dispatchToolbarDragActivity(false);
+      }
+      isPointerPressActiveRef.current = false;
+      isDraggingRef.current = false;
+      isToolbarDragActiveRef.current = false;
+      clearPointerPressListeners();
+    };
+  }, [clearPointerPressListeners, dispatchToolbarDragActivity]);
   return /* @__PURE__ */ import_react.default.createElement(
     "span",
     {
-      ref: setNodeRef,
+      ref: setDragHandlerNodeRef,
       ...listeners,
       ...attributes,
+      onPointerDownCapture: (event) => {
+        if (event.button !== 0) {
+          return;
+        }
+        dispatchToolbarDragAnchor({
+          point: {
+            x: event.clientX,
+            y: event.clientY
+          }
+        });
+        isPointerPressActiveRef.current = true;
+        syncToolbarDragActivity();
+        registerPointerPressListeners();
+      },
       style: {
         cursor: "grab"
       }
@@ -103,22 +274,54 @@ const Droppable = /* @__PURE__ */ __name(({ model, children }) => {
 }, "Droppable");
 const DndProvider = /* @__PURE__ */ __name(({
   persist = true,
+  showDragOverlay = true,
   children,
+  onDragStart,
   onDragEnd,
+  onDragCancel,
   ...restProps
 }) => {
   const [activeId, setActiveId] = (0, import_react.useState)(null);
+  const [dragAnchorPoint, setDragAnchorPoint] = (0, import_react.useState)(null);
   const flowEngine = (0, import_provider.useFlowEngine)();
+  (0, import_react.useEffect)(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const handleToolbarDragAnchor = /* @__PURE__ */ __name((event) => {
+      var _a;
+      const customEvent = event;
+      setDragAnchorPoint(((_a = customEvent.detail) == null ? void 0 : _a.point) || null);
+    }, "handleToolbarDragAnchor");
+    document.addEventListener(TOOLBAR_DRAG_ANCHOR_EVENT, handleToolbarDragAnchor);
+    return () => {
+      document.removeEventListener(TOOLBAR_DRAG_ANCHOR_EVENT, handleToolbarDragAnchor);
+    };
+  }, []);
+  const overlayAnchorModifier = (0, import_react.useCallback)(
+    ({ active, activeNodeRect, transform }) => {
+      const nextTransform = resolveOverlayAnchorTransform({
+        activeId,
+        active,
+        transform,
+        activeNodeRect,
+        dragAnchorPoint
+      });
+      return nextTransform;
+    },
+    [activeId, dragAnchorPoint]
+  );
   return /* @__PURE__ */ import_react.default.createElement(
     import_core.DndContext,
     {
+      ...restProps,
       onDragStart: (event) => {
-        var _a;
         setActiveId(event.active.id);
-        (_a = restProps.onDragStart) == null ? void 0 : _a.call(restProps, event);
+        onDragStart == null ? void 0 : onDragStart(event);
       },
       onDragEnd: (event) => {
         setActiveId(null);
+        setDragAnchorPoint(null);
         if (!onDragEnd) {
           if (event.over) {
             flowEngine.moveModel(event.active.id, event.over.id, { persist });
@@ -127,30 +330,46 @@ const DndProvider = /* @__PURE__ */ __name(({
           onDragEnd(event);
         }
       },
+      onDragCancel: (event) => {
+        setActiveId(null);
+        setDragAnchorPoint(null);
+        onDragCancel == null ? void 0 : onDragCancel(event);
+      },
       ...restProps
     },
     children,
-    (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ import_react.default.createElement(import_core.DragOverlay, { dropAnimation: null, zIndex: 2e3 }, activeId && /* @__PURE__ */ import_react.default.createElement(
-        "span",
+    showDragOverlay && typeof document !== "undefined" ? (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ import_react.default.createElement(
+        import_core.DragOverlay,
         {
-          style: {
-            display: "inline-flex",
-            alignItems: "center",
-            whiteSpace: "nowrap",
-            background: "#fff",
-            border: "1px solid #1890ff",
-            borderRadius: 4,
-            padding: "4px 12px",
-            color: "#1890ff",
-            // fontSize: 18,
-            boxShadow: "0 2px 8px rgba(0,0,0,0.15)"
-          }
+          dropAnimation: null,
+          modifiers: [overlayAnchorModifier],
+          zIndex: 2e3,
+          style: { pointerEvents: "none" }
         },
-        flowEngine.translate("Dragging")
-      )),
+        activeId && /* @__PURE__ */ import_react.default.createElement(
+          "span",
+          {
+            "data-testid": "flow-drag-preview",
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              whiteSpace: "nowrap",
+              background: "#fff",
+              border: "1px solid #1890ff",
+              borderRadius: 4,
+              padding: "4px 12px",
+              color: "#1890ff",
+              pointerEvents: "none",
+              // fontSize: 18,
+              boxShadow: "0 2px 8px rgba(0,0,0,0.15)"
+            }
+          },
+          flowEngine.translate("Dragging")
+        )
+      ),
       document.body
-    )
+    ) : null
   );
 }, "DndProvider");
 // Annotate the CommonJS export names for ESM import in node:
@@ -159,6 +378,8 @@ const DndProvider = /* @__PURE__ */ __name(({
   DragHandler,
   Droppable,
   EMPTY_COLUMN_UID,
+  TOOLBAR_DRAG_ACTIVITY_EVENT,
+  resolveOverlayAnchorTransform,
   ...require("./findModelUidPosition"),
   ...require("./gridDragPlanner")
 });

package/lib/components/settings/wrappers/component/SelectWithTitle.d.ts

@@ -15,5 +15,6 @@ export interface SelectWithTitleProps {
     itemKey?: string;
     onChange?: (...args: any[]) => void;
     dropdownRender?: any;
+    tooltip?: any;
 }
-export declare function SelectWithTitle({ title, getDefaultValue, onChange, options, fieldNames, itemKey, ...others }: SelectWithTitleProps): React.JSX.Element;
+export declare function SelectWithTitle({ title, getDefaultValue, onChange, options, fieldNames, itemKey, tooltip, ...others }: SelectWithTitleProps): React.JSX.Element;

package/lib/components/settings/wrappers/component/SelectWithTitle.js

@@ -50,6 +50,7 @@ function SelectWithTitle({
   options,
   fieldNames,
   itemKey,
+  tooltip,
   ...others
 }) {
   const [open, setOpen] = (0, import_react.useState)(false);
@@ -80,6 +81,18 @@ function SelectWithTitle({
     setValue(val);
     onChange == null ? void 0 : onChange({ [itemKey]: val });
   }, "handleChange");
+  const titleNode = /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      style: {
+        whiteSpace: "nowrap",
+        // 不换行
+        flexShrink: 0
+        // 不被挤压
+      }
+    },
+    title
+  );
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -94,18 +107,7 @@ function SelectWithTitle({
         }, 200);
       }
     },
-    /* @__PURE__ */ import_react.default.createElement(
-      "span",
-      {
-        style: {
-          whiteSpace: "nowrap",
-          // 不换行
-          flexShrink: 0
-          // 不被挤压
-        }
-      },
-      title
-    ),
+    tooltip ? /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: tooltip, placement: "top", destroyTooltipOnHide: true }, titleNode) : titleNode,
     /* @__PURE__ */ import_react.default.createElement(
       import_antd.Select,
       {

package/lib/components/settings/wrappers/contextual/DefaultSettingsIcon.d.ts

@@ -6,6 +6,7 @@
  * 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 type { DropdownProps } from 'antd';
 import React from 'react';
 import { FlowModel } from '../../../../models';
 /**
@@ -18,6 +19,8 @@ interface DefaultSettingsIconProps {
     showCopyUidButton?: boolean;
     menuLevels?: number;
     flattenSubMenus?: boolean;
+    onDropdownVisibleChange?: (open: boolean) => void;
+    getPopupContainer?: DropdownProps['getPopupContainer'];
     [key: string]: any;
 }
 export declare const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps>;

package/lib/components/settings/wrappers/contextual/DefaultSettingsIcon.js

@@ -41,6 +41,7 @@ __export(DefaultSettingsIcon_exports, {
 });
 module.exports = __toCommonJS(DefaultSettingsIcon_exports);
 var import_icons = require("@ant-design/icons");
+var import_css = require("@emotion/css");
 var import_antd = require("antd");
 var import_react = __toESM(require("react"));
 var import_models = require("../../../../models");
@@ -48,6 +49,22 @@ var import_utils = require("../../../../utils");
 var import_hooks = require("../../../../hooks");
 var import_SwitchWithTitle = require("../component/SwitchWithTitle");
 var import_SelectWithTitle = require("../component/SelectWithTitle");
+const findExtraMenuItemByKey = /* @__PURE__ */ __name((items, targetKey) => {
+  var _a;
+  for (const item of items) {
+    const itemKey = String((item == null ? void 0 : item.key) ?? "");
+    if (itemKey === targetKey) {
+      return item;
+    }
+    if ((_a = item.children) == null ? void 0 : _a.length) {
+      const matched = findExtraMenuItemByKey(item.children, targetKey);
+      if (matched) {
+        return matched;
+      }
+    }
+  }
+  return void 0;
+}, "findExtraMenuItemByKey");
 const walkSubModels = /* @__PURE__ */ __name((rootModel, options, cb) => {
   const maxDepth = options.maxDepth;
   const arrayLimit = typeof options.arrayLimit === "number" ? options.arrayLimit : Number.POSITIVE_INFINITY;
@@ -149,13 +166,32 @@ const MenuLabelItem = /* @__PURE__ */ __name(({ title, uiMode, itemProps }) => {
   }
   return /* @__PURE__ */ import_react.default.createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 } }, content, /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: disabledReason, placement: "right", destroyTooltipOnHide: true }, /* @__PURE__ */ import_react.default.createElement(import_icons.QuestionCircleOutlined, { style: { color: disabledIconColor } })));
 }, "MenuLabelItem");
+const TOOLBAR_ICONS_SELECTOR = ".nb-toolbar-container-icons";
+const TOOLBAR_CONTAINER_SELECTOR = ".nb-toolbar-container";
+const TOOLBAR_DROPDOWN_OVERLAY_CLASS = import_css.css`
+  width: max-content;
+  min-width: max-content;
+
+  .ant-dropdown-menu {
+    width: max-content;
+    min-width: max-content;
+  }
+`;
+const getToolbarPopupContainer = /* @__PURE__ */ __name((triggerNode) => {
+  if (!triggerNode) {
+    return null;
+  }
+  return triggerNode.closest(TOOLBAR_ICONS_SELECTOR) || triggerNode.closest(TOOLBAR_CONTAINER_SELECTOR);
+}, "getToolbarPopupContainer");
 const DefaultSettingsIcon = /* @__PURE__ */ __name(({
   model,
   showDeleteButton = true,
   showCopyUidButton = true,
   menuLevels = 1,
   // 默认一级菜单
-  flattenSubMenus = true
+  flattenSubMenus = true,
+  onDropdownVisibleChange,
+  getPopupContainer
 }) => {
   const { message } = import_antd.App.useApp();
   const t = (0, import_react.useMemo)(() => (0, import_utils.getT)(model), [model]);
@@ -168,14 +204,30 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
   const [isLoading, setIsLoading] = (0, import_react.useState)(true);
   const closeDropdown = (0, import_react.useCallback)(() => {
     setVisible(false);
-  }, []);
-  const handleOpenChange = (0, import_react.useCallback)((nextOpen, info) => {
-    if (info.source === "trigger" || nextOpen) {
-      (0, import_react.startTransition)(() => {
-        setVisible(nextOpen);
-      });
-    }
-  }, []);
+    onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(false);
+  }, [onDropdownVisibleChange]);
+  const resolvePopupContainer = (0, import_react.useCallback)(
+    (triggerNode) => {
+      return getToolbarPopupContainer(triggerNode) || (getPopupContainer == null ? void 0 : getPopupContainer(triggerNode)) || (triggerNode == null ? void 0 : triggerNode.parentElement) || document.body;
+    },
+    [getPopupContainer]
+  );
+  const handleOpenChange = (0, import_react.useCallback)(
+    (nextOpen, info) => {
+      if (info.source === "trigger" || nextOpen) {
+        (0, import_react.startTransition)(() => {
+          setVisible(nextOpen);
+        });
+        onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(nextOpen);
+      }
+    },
+    [onDropdownVisibleChange]
+  );
+  (0, import_react.useEffect)(() => {
+    return () => {
+      onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(false);
+    };
+  }, [onDropdownVisibleChange]);
   const dropdownMaxHeight = (0, import_hooks.useNiceDropdownMaxHeight)([visible]);
   (0, import_react.useEffect)(() => {
     let mounted = true;
@@ -353,7 +405,10 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
         handleCopyPopupUid(cleanKey);
         return;
       }
-      const extra = extraMenuItems.find((it) => (it == null ? void 0 : it.key) === originalKey || (it == null ? void 0 : it.key) === cleanKey);
+      const extra = findExtraMenuItemByKey(extraMenuItems, originalKey) || findExtraMenuItemByKey(extraMenuItems, cleanKey);
+      if (extra == null ? void 0 : extra.disabled) {
+        return;
+      }
       if (extra == null ? void 0 : extra.onClick) {
         closeDropdown();
         extra.onClick();
@@ -671,6 +726,9 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Dropdown,
     {
+      getPopupContainer: resolvePopupContainer,
+      overlayClassName: TOOLBAR_DROPDOWN_OVERLAY_CLASS,
+      overlayStyle: { width: "max-content", minWidth: "max-content" },
       onOpenChange: handleOpenChange,
       open: visible,
       menu: {

package/lib/components/settings/wrappers/contextual/FlowsFloatContextMenu.d.ts

@@ -9,13 +9,14 @@
 import React from 'react';
 import { FlowModel } from '../../../../models';
 import { ToolbarItemConfig } from '../../../../types';
-interface ModelProvidedProps {
-    model: FlowModel<any>;
+type ToolbarPosition = 'inside' | 'above' | 'below';
+interface BaseFloatContextMenuProps {
     children?: React.ReactNode;
     enabled?: boolean;
     showDeleteButton?: boolean;
     showCopyUidButton?: boolean;
     containerStyle?: React.CSSProperties;
+    /** 自定义工具栏样式，`top/left/right/bottom` 会作为 portal overlay 的 inset 使用。 */
     toolbarStyle?: React.CSSProperties;
     className?: string;
     /**
@@ -42,68 +43,47 @@ interface ModelProvidedProps {
      * Extra toolbar items to add to this context menu instance
      */
     extraToolbarItems?: ToolbarItemConfig[];
-    /**
-     * @default 'inside'
-     */
-    toolbarPosition?: 'inside' | 'above' | 'below';
-}
-interface ModelByIdProps {
-    uid: string;
-    modelClassName: string;
-    children?: React.ReactNode;
-    enabled?: boolean;
-    showDeleteButton?: boolean;
-    showCopyUidButton?: boolean;
-    containerStyle?: React.CSSProperties;
-    className?: string;
     /**
      * @default true
      */
-    showBorder?: boolean;
-    /**
-     * @default true
-     */
-    showBackground?: boolean;
-    /**
-     * @default false
-     */
-    showTitle?: boolean;
-    /**
-     * Settings menu levels: 1=current model only (default), 2=include sub-models
-     */
-    settingsMenuLevel?: number;
-    /**
-     * Extra toolbar items to add to this context menu instance
-     */
-    extraToolbarItems?: ToolbarItemConfig[];
+    showDynamicFlowsEditor?: boolean;
     /**
      * @default 'inside'
      */
-    toolbarPosition?: 'inside' | 'above' | 'below';
+    toolbarPosition?: ToolbarPosition;
+}
+interface ModelProvidedProps extends BaseFloatContextMenuProps {
+    model: FlowModel<any>;
+}
+interface ModelByIdProps extends BaseFloatContextMenuProps {
+    uid: string;
+    modelClassName: string;
 }
 type FlowsFloatContextMenuProps = ModelProvidedProps | ModelByIdProps;
 /**
- * FlowsFloatContextMenu组件 - 悬浮配置图标组件
+ * FlowsFloatContextMenu组件 - 悬浮配置工具栏组件
  *
  * 功能特性：
  * - 鼠标悬浮显示右上角配置图标
  * - 点击图标显示配置菜单
  * - 支持删除功能
  * - Wrapper 模式支持
- * - 使用与 NocoBase x-settings 一致的样式
- * - 按flow分组显示steps
+ * - 使用 portal overlay 避免被宿主或祖先裁剪
+ * - 设置菜单与工具栏共享同一个 popup 容器
  *
  * 支持两种使用方式：
- * 1. 直接提供model: <FlowsFloatContextMenu model={myModel}>{children}</FlowsFloatContextMenu>
- * 2. 通过uid和modelClassName获取model: <FlowsFloatContextMenu uid="model1" modelClassName="MyModel">{children}</FlowsFloatContextMenu>
+ * 1. 直接提供 model: `<FlowsFloatContextMenu model={myModel}>{children}</FlowsFloatContextMenu>`
+ * 2. 通过 uid 和 modelClassName 获取 model:
+ *    `<FlowsFloatContextMenu uid="model1" modelClassName="MyModel">{children}</FlowsFloatContextMenu>`
  *
  * @param props.children 子组件，必须提供
- * @param props.enabled 是否启用悬浮菜单，默认为true
- * @param props.showDeleteButton 是否显示删除按钮，默认为true
- * @param props.showCopyUidButton 是否显示复制UID按钮，默认为true
+ * @param props.enabled 是否启用悬浮菜单，默认为 true
+ * @param props.showDeleteButton 是否显示删除按钮，默认为 true
+ * @param props.showCopyUidButton 是否显示复制 UID 按钮，默认为 true
  * @param props.containerStyle 容器自定义样式
+ * @param props.toolbarStyle 工具栏自定义样式；`top/left/right/bottom` 会作为 portal overlay 的 inset 使用
  * @param props.className 容器自定义类名
- * @param props.showTitle 是否在边框左上角显示模型title，默认为false
+ * @param props.showTitle 是否在边框左上角显示模型 title，默认为 false
  * @param props.settingsMenuLevel 设置菜单层级：1=仅当前模型(默认)，2=包含子模型
  * @param props.extraToolbarItems 额外的工具栏项目，仅应用于此实例
  */