@nocobase/flow-engine 2.1.0-beta.22 → 2.1.0-beta.24

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

@@ -7,15 +7,33 @@
  * 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>;

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"
       }
@@ -104,21 +275,52 @@ const Droppable = /* @__PURE__ */ __name(({ model, children }) => {
 const DndProvider = /* @__PURE__ */ __name(({
   persist = 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 +329,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",
+    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 +377,8 @@ const DndProvider = /* @__PURE__ */ __name(({
   DragHandler,
   Droppable,
   EMPTY_COLUMN_UID,
+  TOOLBAR_DRAG_ACTIVITY_EVENT,
+  resolveOverlayAnchorTransform,
   ...require("./findModelUidPosition"),
   ...require("./gridDragPlanner")
 });

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

@@ -49,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;
@@ -389,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();

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

@@ -43,6 +43,10 @@ interface BaseFloatContextMenuProps {
      * Extra toolbar items to add to this context menu instance
      */
     extraToolbarItems?: ToolbarItemConfig[];
+    /**
+     * @default true
+     */
+    showDynamicFlowsEditor?: boolean;
     /**
      * @default 'inside'
      */

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

@@ -51,7 +51,8 @@ var import__ = require("../../../..");
 var import_reactive = require("../../../../reactive");
 var import_useFloatToolbarPortal = require("./useFloatToolbarPortal");
 var import_useFloatToolbarVisibility = require("./useFloatToolbarVisibility");
-const TOOLBAR_Z_INDEX = 999;
+const TOOLBAR_ITEM_WIDTH = 19;
+const DEFAULT_POPUP_BASE_Z_INDEX = 1e3;
 const getFloatMenuInstanceId = /* @__PURE__ */ __name((model) => {
   if (!model) {
     return "";
@@ -74,9 +75,10 @@ const toolbarPositionClassNames = {
 const toolbarContainerStyles = /* @__PURE__ */ __name(({
   showBackground,
   showBorder,
-  ctx
+  ctx,
+  toolbarZIndex
 }) => import_css.css`
-  z-index: ${TOOLBAR_Z_INDEX};
+  z-index: ${toolbarZIndex};
   opacity: 0;
   pointer-events: none;
   overflow: visible;
@@ -254,12 +256,15 @@ const detectButtonInDOM = /* @__PURE__ */ __name((container) => {
   }
   return false;
 }, "detectButtonInDOM");
-const renderToolbarItems = /* @__PURE__ */ __name((model, modelInstanceId, showDeleteButton, showCopyUidButton, flowEngine, settingsMenuLevel, extraToolbarItems, onSettingsMenuOpenChange, getPopupContainer) => {
+const renderToolbarItems = /* @__PURE__ */ __name((model, modelInstanceId, showDeleteButton, showCopyUidButton, flowEngine, settingsMenuLevel, extraToolbarItems, showDynamicFlowsEditor = true, onSettingsMenuOpenChange, getPopupContainer) => {
   var _a, _b;
   const toolbarItems = ((_b = (_a = flowEngine == null ? void 0 : flowEngine.flowSettings) == null ? void 0 : _a.getToolbarItems) == null ? void 0 : _b.call(_a)) || [];
   const allToolbarItems = [...toolbarItems, ...extraToolbarItems || []];
   allToolbarItems.sort((a, b) => (a.sort || 0) - (b.sort || 0)).reverse();
   return allToolbarItems.filter((itemConfig) => {
+    if (itemConfig.key === "dynamic-flows-editor" && showDynamicFlowsEditor === false) {
+      return false;
+    }
     return itemConfig.visible ? itemConfig.visible(model) : true;
   }).map((itemConfig) => {
     const ItemComponent = itemConfig.component;
@@ -285,21 +290,23 @@ const buildToolbarContainerClassName = /* @__PURE__ */ __name(({
   showBackground,
   showBorder,
   ctx,
+  toolbarZIndex,
   portalRenderSnapshot,
   isToolbarVisible,
   className
 }) => [
-  toolbarContainerStyles({ showBackground, showBorder, ctx }),
+  toolbarContainerStyles({ showBackground, showBorder, ctx, toolbarZIndex }),
   "nb-toolbar-portal",
   (portalRenderSnapshot == null ? void 0 : portalRenderSnapshot.positioningMode) === "absolute" ? "nb-toolbar-portal-absolute" : "nb-toolbar-portal-fixed",
   isToolbarVisible ? "nb-toolbar-visible" : "",
   (className == null ? void 0 : className.includes("nb-in-template")) ? "nb-in-template" : ""
 ].filter(Boolean).join(" "), "buildToolbarContainerClassName");
-const buildToolbarContainerStyle = /* @__PURE__ */ __name((portalRect, toolbarStyle) => ({
+const buildToolbarContainerStyle = /* @__PURE__ */ __name((portalRect, toolbarStyle, toolbarItemCount = 0) => ({
   top: `${portalRect.top}px`,
   left: `${portalRect.left}px`,
   width: `${portalRect.width}px`,
   height: `${portalRect.height}px`,
+  minWidth: toolbarItemCount ? `${TOOLBAR_ITEM_WIDTH * toolbarItemCount}px` : void 0,
   ...(0, import_useFloatToolbarPortal.omitToolbarPortalInsetStyle)(toolbarStyle)
 }), "buildToolbarContainerStyle");
 const isModelByIdProps = /* @__PURE__ */ __name((props) => {
@@ -392,9 +399,11 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
     showDragHandle = false,
     settingsMenuLevel,
     extraToolbarItems,
+    showDynamicFlowsEditor = true,
     toolbarStyle,
     toolbarPosition = "inside"
   }) => {
+    var _a;
     const [hasButton, setHasButton] = (0, import_react.useState)(false);
     const containerRef = (0, import_react.useRef)(null);
     const toolbarContainerRef = (0, import_react.useRef)(null);
@@ -447,6 +456,7 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
         flowEngine,
         settingsMenuLevel,
         extraToolbarItems,
+        showDynamicFlowsEditor,
         handleSettingsMenuOpenChange,
         getPopupContainer
       ) : [],
@@ -458,7 +468,8 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
         model,
         settingsMenuLevel,
         showCopyUidButton,
-        showDeleteButton
+        showDeleteButton,
+        showDynamicFlowsEditor
       ]
     );
     (0, import_react.useEffect)(() => {
@@ -488,15 +499,17 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
     if (!enabled || !children) {
       return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children);
     }
+    const toolbarZIndex = (((_a = model.context.themeToken) == null ? void 0 : _a.zIndexPopupBase) || DEFAULT_POPUP_BASE_Z_INDEX) + 1;
     const toolbarContainerClassName = buildToolbarContainerClassName({
       showBackground,
       showBorder,
       ctx: model.context,
+      toolbarZIndex,
       portalRenderSnapshot,
       isToolbarVisible,
       className
     });
-    const toolbarContainerStyle = buildToolbarContainerStyle(portalRect, toolbarStyle);
+    const toolbarContainerStyle = buildToolbarContainerStyle(portalRect, toolbarStyle, toolbarItems.length);
     const toolbarNode = shouldRenderToolbar ? /* @__PURE__ */ import_react.default.createElement(
       "div",
       {

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

@@ -33,6 +33,7 @@ __export(useFloatToolbarPortal_exports, {
 module.exports = __toCommonJS(useFloatToolbarPortal_exports);
 var import_react = require("react");
 const APP_CONTAINER_SELECTOR = "#nocobase-app-container";
+const MENU_SUBMENU_POPUP_SELECTOR = ".ant-menu-submenu-popup";
 const DRAWER_CONTENT_WRAPPER_SELECTOR = ".ant-drawer-content-wrapper";
 const DRAWER_CONTENT_SELECTOR = ".ant-drawer-content";
 const DRAWER_ROOT_SELECTOR = ".ant-drawer-root";
@@ -52,6 +53,7 @@ const createAbsolutePortalHostConfig = /* @__PURE__ */ __name((element) => ({
   positioningMode: "absolute"
 }), "createAbsolutePortalHostConfig");
 const popupPortalHostResolvers = [
+  (hostEl) => getClosestElement(hostEl, MENU_SUBMENU_POPUP_SELECTOR),
   (hostEl) => getClosestElement(hostEl, DRAWER_CONTENT_WRAPPER_SELECTOR),
   (hostEl) => getClosestElement(hostEl, MODAL_WRAP_SELECTOR),
   (hostEl) => getClosestElement(hostEl, MODAL_SELECTOR),