@nocobase/flow-engine 2.2.0-alpha.1 → 2.2.0-alpha.11

package/lib/components/dnd/index.js

@@ -57,6 +57,10 @@ 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 getToolbarModelUidFromNode = /* @__PURE__ */ __name((node) => {
+  var _a;
+  return ((_a = node == null ? void 0 : node.closest(".nb-toolbar-container[data-model-uid]")) == null ? void 0 : _a.getAttribute("data-model-uid")) || null;
+}, "getToolbarModelUidFromNode");
 const resolveOverlayAnchorTransform = /* @__PURE__ */ __name(({
   activeId,
   active,
@@ -76,7 +80,7 @@ const resolveOverlayAnchorTransform = /* @__PURE__ */ __name(({
 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");
+  const toolbarModelUid = getToolbarModelUidFromNode(activatorNode);
   if (!ownerDocument || !toolbarModelUid) {
     return activatorNode;
   }
@@ -99,6 +103,7 @@ const DragHandler = /* @__PURE__ */ __name(({
   const dragHandlerRef = (0, import_react.useRef)(null);
   const draggableNodeRef = (0, import_react.useRef)(null);
   const pointerPressCleanupRef = (0, import_react.useRef)(null);
+  const toolbarDragModelUidRef = (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);
@@ -128,9 +133,11 @@ const DragHandler = /* @__PURE__ */ __name(({
       if (!ownerDocument) {
         return;
       }
+      const toolbarModelUid = getToolbarModelUidFromNode(dragHandlerRef.current) || toolbarDragModelUidRef.current || model.uid;
+      toolbarDragModelUidRef.current = active ? toolbarModelUid : null;
       ownerDocument.dispatchEvent(
         new CustomEvent(TOOLBAR_DRAG_ACTIVITY_EVENT, {
-          detail: { active, modelUid: model.uid }
+          detail: { active, modelUid: toolbarModelUid }
         })
       );
     },

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

@@ -44,6 +44,7 @@ var import_react = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_antd = require("antd");
 var import_css = require("@emotion/css");
+var import_ahooks = require("ahooks");
 var import_hooks = require("../../../../hooks");
 var import_provider = require("../../../../provider");
 var import_utils = require("../../../../utils");
@@ -312,6 +313,38 @@ const buildToolbarContainerStyle = /* @__PURE__ */ __name((portalRect, toolbarSt
 const isModelByIdProps = /* @__PURE__ */ __name((props) => {
   return "uid" in props && "modelClassName" in props && Boolean(props.uid) && Boolean(props.modelClassName);
 }, "isModelByIdProps");
+const stopResizeInteractionEvent = /* @__PURE__ */ __name((event) => {
+  var _a;
+  if (!event) {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  const nativeEvent = "nativeEvent" in event ? event.nativeEvent : event;
+  (_a = nativeEvent.stopImmediatePropagation) == null ? void 0 : _a.call(nativeEvent);
+}, "stopResizeInteractionEvent");
+const pendingResizeClickSuppressions = /* @__PURE__ */ new WeakMap();
+const clearPendingResizeClickSuppression = /* @__PURE__ */ __name((ownerDocument) => {
+  const pending = pendingResizeClickSuppressions.get(ownerDocument);
+  if (!pending) {
+    return;
+  }
+  ownerDocument.removeEventListener("click", pending.listener, true);
+  (ownerDocument.defaultView || window).clearTimeout(pending.timer);
+  pendingResizeClickSuppressions.delete(ownerDocument);
+}, "clearPendingResizeClickSuppression");
+const suppressNextResizeClick = /* @__PURE__ */ __name((ownerDocument) => {
+  clearPendingResizeClickSuppression(ownerDocument);
+  const listener = /* @__PURE__ */ __name((event) => {
+    stopResizeInteractionEvent(event);
+    clearPendingResizeClickSuppression(ownerDocument);
+  }, "listener");
+  const timer = (ownerDocument.defaultView || window).setTimeout(() => {
+    clearPendingResizeClickSuppression(ownerDocument);
+  }, 0);
+  pendingResizeClickSuppressions.set(ownerDocument, { listener, timer });
+  ownerDocument.addEventListener("click", listener, true);
+}, "suppressNextResizeClick");
 const FlowsFloatContextMenu = (0, import_reactive.observer)((props) => {
   const ctx = (0, import__.useFlowContext)();
   if (!ctx.flowSettingsEnabled) {
@@ -326,44 +359,64 @@ const ResizeHandles = /* @__PURE__ */ __name((props) => {
   const isDraggingRef = (0, import_react.useRef)(false);
   const dragTypeRef = (0, import_react.useRef)(null);
   const dragStartPosRef = (0, import_react.useRef)({ x: 0, y: 0 });
+  const dragOwnerDocumentRef = (0, import_react.useRef)(null);
   const { onDragStart, onDragEnd } = props;
-  const handleDragMove = (0, import_react.useCallback)(
-    (e) => {
-      if (!isDraggingRef.current || !dragTypeRef.current) return;
-      const deltaX = e.clientX - dragStartPosRef.current.x;
-      switch (dragTypeRef.current) {
-        case "left":
-          props.model.parent.emitter.emit("onResizeLeft", { resizeDistance: -deltaX, model: props.model });
-          break;
-        case "right":
-          props.model.parent.emitter.emit("onResizeRight", { resizeDistance: deltaX, model: props.model });
-          break;
-      }
-    },
-    [props.model]
-  );
-  const handleDragEnd = (0, import_react.useCallback)(() => {
+  const handleDragMove = (0, import_ahooks.useMemoizedFn)((e) => {
+    if (!isDraggingRef.current || !dragTypeRef.current) return;
+    stopResizeInteractionEvent(e);
+    const deltaX = e.clientX - dragStartPosRef.current.x;
+    switch (dragTypeRef.current) {
+      case "left":
+        props.model.parent.emitter.emit("onResizeLeft", { resizeDistance: -deltaX, model: props.model });
+        break;
+      case "right":
+        props.model.parent.emitter.emit("onResizeRight", { resizeDistance: deltaX, model: props.model });
+        break;
+    }
+  });
+  const handleDragEnd = (0, import_ahooks.useMemoizedFn)((e) => {
+    if (!isDraggingRef.current) {
+      return;
+    }
+    stopResizeInteractionEvent(e);
+    const ownerDocument = dragOwnerDocumentRef.current || document;
+    ownerDocument.removeEventListener("mousemove", handleDragMove, true);
+    ownerDocument.removeEventListener("mouseup", handleDragEnd, true);
+    suppressNextResizeClick(ownerDocument);
     isDraggingRef.current = false;
     dragTypeRef.current = null;
     dragStartPosRef.current = { x: 0, y: 0 };
-    document.removeEventListener("mousemove", handleDragMove);
-    document.removeEventListener("mouseup", handleDragEnd);
+    dragOwnerDocumentRef.current = null;
     props.model.parent.emitter.emit("onResizeEnd");
     onDragEnd == null ? void 0 : onDragEnd();
-  }, [handleDragMove, onDragEnd, props.model]);
-  const handleDragStart = (0, import_react.useCallback)(
-    (e, type) => {
-      e.preventDefault();
-      e.stopPropagation();
-      isDraggingRef.current = true;
-      dragTypeRef.current = type;
-      dragStartPosRef.current = { x: e.clientX, y: e.clientY };
-      document.addEventListener("mousemove", handleDragMove);
-      document.addEventListener("mouseup", handleDragEnd);
-      onDragStart == null ? void 0 : onDragStart();
-    },
-    [handleDragMove, handleDragEnd, onDragStart]
-  );
+  });
+  (0, import_react.useEffect)(() => {
+    return () => {
+      const dragOwnerDocument = dragOwnerDocumentRef.current;
+      dragOwnerDocument == null ? void 0 : dragOwnerDocument.removeEventListener("mousemove", handleDragMove, true);
+      dragOwnerDocument == null ? void 0 : dragOwnerDocument.removeEventListener("mouseup", handleDragEnd, true);
+      if (isDraggingRef.current) {
+        suppressNextResizeClick(dragOwnerDocument || document);
+        props.model.parent.emitter.emit("onResizeEnd");
+        onDragEnd == null ? void 0 : onDragEnd();
+      }
+      isDraggingRef.current = false;
+      dragTypeRef.current = null;
+      dragStartPosRef.current = { x: 0, y: 0 };
+      dragOwnerDocumentRef.current = null;
+    };
+  }, [handleDragMove, handleDragEnd, onDragEnd, props.model]);
+  const handleDragStart = (0, import_ahooks.useMemoizedFn)((e, type) => {
+    stopResizeInteractionEvent(e);
+    const ownerDocument = e.currentTarget.ownerDocument;
+    isDraggingRef.current = true;
+    dragTypeRef.current = type;
+    dragStartPosRef.current = { x: e.clientX, y: e.clientY };
+    dragOwnerDocumentRef.current = ownerDocument;
+    ownerDocument.addEventListener("mousemove", handleDragMove, true);
+    ownerDocument.addEventListener("mouseup", handleDragEnd, true);
+    onDragStart == null ? void 0 : onDragStart();
+  });
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -466,6 +519,7 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
         getPopupContainer,
         handleSettingsMenuOpenChange,
         model,
+        modelUid,
         settingsMenuLevel,
         showCopyUidButton,
         showDeleteButton,

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

@@ -44,6 +44,17 @@ const getToolbarModelUidFromTarget = /* @__PURE__ */ __name((target) => {
   }
   return ((_a = target.closest(".nb-toolbar-container[data-model-uid]")) == null ? void 0 : _a.getAttribute("data-model-uid")) || null;
 }, "getToolbarModelUidFromTarget");
+const escapeCssAttributeValue = /* @__PURE__ */ __name((value) => {
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\n/g, "\\a ").replace(/\r/g, "\\d ").replace(/\f/g, "\\c ");
+}, "escapeCssAttributeValue");
+const isToolbarModelUidRendered = /* @__PURE__ */ __name((ownerDocument, modelUid) => {
+  if (!ownerDocument) {
+    return false;
+  }
+  return !!ownerDocument.querySelector(
+    `.nb-toolbar-container[data-model-uid="${escapeCssAttributeValue(modelUid)}"]`
+  );
+}, "isToolbarModelUidRendered");
 const isNodeWithinDescendantFloatToolbar = /* @__PURE__ */ __name((target, container, currentModelUid) => {
   const targetModelUid = getToolbarModelUidFromTarget(target);
   if (!container || !targetModelUid || targetModelUid === currentModelUid) {
@@ -222,6 +233,15 @@ const useFloatToolbarVisibility = /* @__PURE__ */ __name(({
       const isCurrentHostTarget = !childWithMenu || childWithMenu === containerRef.current;
       if (isCurrentHostTarget) {
         clearHideToolbarTimer();
+        setActiveChildToolbarIds((prevIds) => {
+          var _a;
+          if (!prevIds.length) {
+            return prevIds;
+          }
+          const ownerDocument = ((_a = containerRef.current) == null ? void 0 : _a.ownerDocument) ?? null;
+          const nextIds = prevIds.filter((id) => isToolbarModelUidRendered(ownerDocument, id));
+          return nextIds.length === prevIds.length ? prevIds : nextIds;
+        });
         setHostHovered(true);
       }
       setHideMenu(!!childWithMenu && childWithMenu !== containerRef.current);

package/lib/components/subModel/LazyDropdown.js

@@ -347,19 +347,15 @@ const createSearchItem = /* @__PURE__ */ __name((item, searchKey, currentSearchV
         e.stopPropagation();
       },
       onChange: (e) => {
-        var _a;
         e.stopPropagation();
         const value = e.target.value;
         if (shouldActivateSearchSubmenu) {
           activateSearchSubmenu(searchKey);
         }
-        if (((_a = e.nativeEvent) == null ? void 0 : _a.isComposing) || searchHandlers.isComposing(searchKey)) {
+        if (e.nativeEvent.isComposing || searchHandlers.isComposing(searchKey)) {
           searchHandlers.updateInputValue(searchKey, value);
           return;
         }
-        if (!value && shouldActivateSearchSubmenu) {
-          deactivateSearchSubmenu(searchKey);
-        }
         searchHandlers.updateSearchValue(searchKey, value);
       },
       onCompositionStart: (e) => {
@@ -373,11 +369,7 @@ const createSearchItem = /* @__PURE__ */ __name((item, searchKey, currentSearchV
         e.stopPropagation();
         const value = e.currentTarget.value;
         if (shouldActivateSearchSubmenu) {
-          if (value) {
-            activateSearchSubmenu(searchKey);
-          } else {
-            deactivateSearchSubmenu(searchKey);
-          }
+          activateSearchSubmenu(searchKey);
         }
         searchHandlers.endComposition(searchKey, value);
       },
@@ -385,10 +377,20 @@ const createSearchItem = /* @__PURE__ */ __name((item, searchKey, currentSearchV
         e.stopPropagation();
       },
       onKeyDown: (e) => {
+        if (e.key === "Escape" || e.key === "Tab") {
+          deactivateSearchSubmenu(searchKey);
+          return;
+        }
+        if (shouldActivateSearchSubmenu) {
+          activateSearchSubmenu(searchKey);
+        }
         e.stopPropagation();
       },
       onMouseDown: (e) => {
         e.stopPropagation();
+        if (shouldActivateSearchSubmenu) {
+          activateSearchSubmenu(searchKey);
+        }
       },
       size: "small",
       style: {
@@ -409,7 +411,7 @@ const KEEP_OPEN_LABEL_STYLE = {
   width: "100%"
 };
 const DROPDOWN_PERSIST_TTL_MS = 350;
-const SUBMENU_CLOSE_DELAY = 0.05;
+const MENU_CLOSE_DELAY = 0.3;
 const SUBMENU_MOTION_DISABLED = {
   motionEnter: false,
   motionLeave: false
@@ -417,13 +419,18 @@ const SUBMENU_MOTION_DISABLED = {
 const dropdownPersistRegistry = /* @__PURE__ */ new Map();
 const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
   const engine = (0, import_provider.useFlowEngine)();
+  const { getPrefixCls } = import_react.default.useContext(import_antd.ConfigProvider.ConfigContext);
+  const triggerId = import_react.default.useId();
   const [menuVisible, setMenuVisible] = (0, import_react.useState)(false);
   const [openKeys, setOpenKeys] = (0, import_react.useState)(/* @__PURE__ */ new Set());
-  const [activeSearchKey, setActiveSearchKey] = (0, import_react.useState)(null);
   const [rootItems, setRootItems] = (0, import_react.useState)([]);
   const [rootLoading, setRootLoading] = (0, import_react.useState)(false);
+  const activeSearchKeyRef = (0, import_react.useRef)(null);
   const closeByOutsideClickRef = (0, import_react.useRef)(false);
   const skipPreserveActiveSearchRef = (0, import_react.useRef)(false);
+  const triggerOpenClassName = `nb-lazy-dropdown-trigger-${triggerId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const defaultOpenClassName = `${getPrefixCls("dropdown", props.prefixCls)}-open`;
+  const mergedOpenClassName = [props.openClassName ?? defaultOpenClassName, triggerOpenClassName].filter(Boolean).join(" ");
   const dropdownMaxHeight = useNiceDropdownMaxHeight();
   const t = engine.translate.bind(engine);
   const { items: menuItems, keepDropdownOpen, persistKey, stateVersion, refreshKeys, ...dropdownMenuProps } = menu;
@@ -440,12 +447,12 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
   useSubmenuStyles(menuVisible, dropdownMaxHeight);
   const closeMenu = (0, import_react.useCallback)(() => {
     setMenuVisible(false);
-    setActiveSearchKey(null);
+    activeSearchKeyRef.current = null;
     setOpenKeys(/* @__PURE__ */ new Set());
     clearAllSearchValues();
   }, [clearAllSearchValues]);
   const activateSearchSubmenu = (0, import_react.useCallback)((key) => {
-    setActiveSearchKey(key);
+    activeSearchKeyRef.current = key;
     setOpenKeys((prev) => {
       if (prev.has(key)) return prev;
       const next = new Set(prev);
@@ -454,34 +461,38 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
     });
   }, []);
   const deactivateSearchSubmenu = (0, import_react.useCallback)((key) => {
-    setActiveSearchKey((prev) => prev === key ? null : prev);
+    if (activeSearchKeyRef.current === key) {
+      activeSearchKeyRef.current = null;
+    }
   }, []);
   const closeActiveSearchForPath = (0, import_react.useCallback)(
     (keyPath) => {
+      const activeSearchKey = activeSearchKeyRef.current;
       if (!activeSearchKey || keyPath === activeSearchKey || keyPath.startsWith(`${activeSearchKey}/`) || activeSearchKey.startsWith(`${keyPath}/`)) {
         return;
       }
       skipPreserveActiveSearchRef.current = true;
       clearSearchValue(activeSearchKey);
-      setActiveSearchKey(null);
+      activeSearchKeyRef.current = null;
       setOpenKeys((prev) => {
         const next = new Set(prev);
         next.delete(activeSearchKey);
         return next;
       });
     },
-    [activeSearchKey, clearSearchValue]
+    [clearSearchValue]
   );
   const handleMenuOpenChange = (0, import_react.useCallback)(
     (nextOpenKeys) => {
       var _a, _b;
       let normalized = normalizeOpenKeys(nextOpenKeys);
-      if (activeSearchKey && openKeys.has(activeSearchKey) && !normalized.includes(activeSearchKey)) {
-        if (normalized.length || skipPreserveActiveSearchRef.current) {
+      const activeSearchKey = activeSearchKeyRef.current;
+      if (activeSearchKey && !normalized.includes(activeSearchKey)) {
+        if (skipPreserveActiveSearchRef.current) {
           clearSearchValue(activeSearchKey);
-          setActiveSearchKey(null);
+          activeSearchKeyRef.current = null;
         } else {
-          normalized = [activeSearchKey];
+          normalized = Array.from(openKeys);
         }
       }
       if (!normalized.length && shouldPreventClose()) {
@@ -498,13 +509,15 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
       (_b = dropdownMenuProps.onOpenChange) == null ? void 0 : _b.call(dropdownMenuProps, normalized);
       skipPreserveActiveSearchRef.current = false;
     },
-    [activeSearchKey, clearSearchValue, dropdownMenuProps, openKeys, shouldPreventClose]
+    [clearSearchValue, dropdownMenuProps, openKeys, shouldPreventClose]
   );
   (0, import_react.useEffect)(() => {
     if (!menuVisible) return;
     const markOutsideClick = /* @__PURE__ */ __name((event) => {
       const target = event.target;
-      const isOutside = !(target == null ? void 0 : target.closest(".ant-dropdown, .ant-dropdown-menu, .ant-dropdown-menu-submenu-popup"));
+      const isInsidePopup = target == null ? void 0 : target.closest(".ant-dropdown, .ant-dropdown-menu, .ant-dropdown-menu-submenu-popup");
+      const isInsideCurrentTrigger = target == null ? void 0 : target.closest(`.${triggerOpenClassName}`);
+      const isOutside = !isInsidePopup && !isInsideCurrentTrigger;
       closeByOutsideClickRef.current = isOutside;
       if (isOutside) {
         closeMenu();
@@ -516,7 +529,7 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
       document.removeEventListener("pointerdown", markOutsideClick, true);
       document.removeEventListener("mousedown", markOutsideClick, true);
     };
-  }, [closeMenu, menuVisible]);
+  }, [closeMenu, menuVisible, triggerOpenClassName]);
   (0, import_react.useEffect)(() => {
     if (!persistKey) return;
     const until = dropdownPersistRegistry.get(persistKey) || 0;
@@ -734,13 +747,15 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
       ...props,
       open: menuVisible,
       destroyPopupOnHide: true,
+      mouseLeaveDelay: props.mouseLeaveDelay ?? MENU_CLOSE_DELAY,
+      openClassName: mergedOpenClassName,
       overlayClassName,
       placement: "bottomLeft",
       menu: {
         ...dropdownMenuProps,
         openKeys: Array.from(openKeys),
         items,
-        subMenuCloseDelay: dropdownMenuProps.subMenuCloseDelay ?? SUBMENU_CLOSE_DELAY,
+        subMenuCloseDelay: dropdownMenuProps.subMenuCloseDelay ?? MENU_CLOSE_DELAY,
         motion: dropdownMenuProps.motion ?? SUBMENU_MOTION_DISABLED,
         onClick: /* @__PURE__ */ __name(() => {
         }, "onClick"),
@@ -752,7 +767,7 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
         }
       },
       onOpenChange: (visible, info) => {
-        if (!visible && activeSearchKey && (info == null ? void 0 : info.source) === "trigger" && !closeByOutsideClickRef.current) {
+        if (!visible && activeSearchKeyRef.current && (info == null ? void 0 : info.source) === "trigger" && !closeByOutsideClickRef.current) {
           return;
         }
         if (!visible && shouldPreventClose()) {

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

@@ -17,11 +17,20 @@ export interface VariableHybridInputProps {
     value?: string;
     onChange?: (value: string) => void;
     disabled?: boolean;
+    readOnly?: boolean;
     placeholder?: string;
     addonBefore?: React.ReactNode;
     metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
     converters?: VariableHybridInputConverters;
     style?: React.CSSProperties;
     className?: string;
+    /**
+     * Validation status — turns the input border red (`error`) or amber
+     * (`warning`). Usually omitted: when rendered inside an antd `Form.Item`, the
+     * status is read automatically from `FormItemInputContext`, so dropping this
+     * into a `Form.Item` with failing rules colours the border with no extra
+     * wiring. An explicit prop wins over the inherited form status.
+     */
+    status?: 'error' | 'warning';
 }
 export declare const VariableHybridInput: React.NamedExoticComponent<VariableHybridInputProps>;