@nocobase/flow-engine 2.1.0-beta.8 → 2.2.0-alpha.1

package/lib/components/subModel/LazyDropdown.js

@@ -169,16 +169,66 @@ const useKeepDropdownOpen = /* @__PURE__ */ __name(() => {
 }, "useKeepDropdownOpen");
 const useMenuSearch = /* @__PURE__ */ __name(() => {
   const [searchValues, setSearchValues] = (0, import_react.useState)({});
+  const [inputValues, setInputValues] = (0, import_react.useState)({});
   const [isSearching, setIsSearching] = (0, import_react.useState)(false);
+  const [composingCount, setComposingCount] = (0, import_react.useState)(0);
+  const composingKeysRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
   const searchTimeoutRef = (0, import_react.useRef)(null);
-  const updateSearchValue = /* @__PURE__ */ __name((key, value) => {
+  const updateSearchValue = (0, import_react.useCallback)((key, value) => {
     setIsSearching(true);
+    setInputValues((prev) => ({ ...prev, [key]: value }));
     setSearchValues((prev) => ({ ...prev, [key]: value }));
     if (searchTimeoutRef.current) {
       clearTimeout(searchTimeoutRef.current);
     }
     searchTimeoutRef.current = setTimeout(() => setIsSearching(false), 300);
-  }, "updateSearchValue");
+  }, []);
+  const startComposition = (0, import_react.useCallback)((key) => {
+    composingKeysRef.current.add(key);
+    setIsSearching(true);
+    setComposingCount(composingKeysRef.current.size);
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+      searchTimeoutRef.current = null;
+    }
+  }, []);
+  const endComposition = (0, import_react.useCallback)(
+    (key, value) => {
+      composingKeysRef.current.delete(key);
+      setComposingCount(composingKeysRef.current.size);
+      updateSearchValue(key, value);
+    },
+    [updateSearchValue]
+  );
+  const updateInputValue = (0, import_react.useCallback)((key, value) => {
+    setInputValues((prev) => ({ ...prev, [key]: value }));
+  }, []);
+  const clearSearchValue = (0, import_react.useCallback)((key) => {
+    composingKeysRef.current.delete(key);
+    setComposingCount(composingKeysRef.current.size);
+    setInputValues((prev) => {
+      if (!(key in prev)) return prev;
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+    setSearchValues((prev) => {
+      if (!(key in prev)) return prev;
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+  }, []);
+  const clearAllSearchValues = (0, import_react.useCallback)(() => {
+    composingKeysRef.current.clear();
+    setComposingCount(0);
+    setInputValues({});
+    setSearchValues({});
+    setIsSearching(false);
+  }, []);
+  const isComposing = (0, import_react.useCallback)((key) => {
+    return key ? composingKeysRef.current.has(key) : composingKeysRef.current.size > 0;
+  }, []);
   (0, import_react.useEffect)(() => {
     return () => {
       if (searchTimeoutRef.current) {
@@ -188,8 +238,15 @@ const useMenuSearch = /* @__PURE__ */ __name(() => {
   }, []);
   return {
     searchValues,
-    isSearching,
-    updateSearchValue
+    inputValues,
+    isSearching: isSearching || composingCount > 0,
+    updateSearchValue,
+    updateInputValue,
+    startComposition,
+    endComposition,
+    clearSearchValue,
+    clearAllSearchValues,
+    isComposing
   };
 }, "useMenuSearch");
 const useSubmenuStyles = /* @__PURE__ */ __name((menuVisible, dropdownMaxHeight) => {
@@ -253,10 +310,32 @@ const SearchInputWithAutoFocus = /* @__PURE__ */ __name((props) => {
   return /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { ref: inputRef, ...rest });
 }, "SearchInputWithAutoFocus");
 const getKeyPath = /* @__PURE__ */ __name((path, key) => [...path, key].join("/"), "getKeyPath");
-const createSearchItem = /* @__PURE__ */ __name((item, searchKey, currentSearchValue, menuVisible, t, updateSearchValue) => ({
+const normalizeOpenKeys = /* @__PURE__ */ __name((nextOpenKeys) => {
+  const latestKey = nextOpenKeys[nextOpenKeys.length - 1];
+  if (!latestKey) {
+    return [];
+  }
+  return nextOpenKeys.filter((key) => latestKey === key || latestKey.startsWith(`${key}/`));
+}, "normalizeOpenKeys");
+const getLabelSearchText = /* @__PURE__ */ __name((label) => {
+  if (label === null || label === void 0 || typeof label === "boolean") {
+    return "";
+  }
+  if (typeof label === "string" || typeof label === "number") {
+    return String(label);
+  }
+  if (Array.isArray(label)) {
+    return label.map(getLabelSearchText).join(" ");
+  }
+  if (import_react.default.isValidElement(label)) {
+    return getLabelSearchText(label.props.children);
+  }
+  return "";
+}, "getLabelSearchText");
+const createSearchItem = /* @__PURE__ */ __name((item, searchKey, currentSearchValue, menuVisible, t, searchHandlers, activateSearchSubmenu, deactivateSearchSubmenu, shouldActivateSearchSubmenu) => ({
   key: `${searchKey}-search`,
   type: "group",
-  label: /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+  label: /* @__PURE__ */ import_react.default.createElement("div", { onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react.default.createElement(
     SearchInputWithAutoFocus,
     {
       visible: menuVisible,
@@ -264,11 +343,50 @@ const createSearchItem = /* @__PURE__ */ __name((item, searchKey, currentSearchV
       allowClear: true,
       placeholder: t(item.searchPlaceholder || "Search"),
       value: currentSearchValue,
+      onFocus: (e) => {
+        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)) {
+          searchHandlers.updateInputValue(searchKey, value);
+          return;
+        }
+        if (!value && shouldActivateSearchSubmenu) {
+          deactivateSearchSubmenu(searchKey);
+        }
+        searchHandlers.updateSearchValue(searchKey, value);
+      },
+      onCompositionStart: (e) => {
+        e.stopPropagation();
+        if (shouldActivateSearchSubmenu) {
+          activateSearchSubmenu(searchKey);
+        }
+        searchHandlers.startComposition(searchKey);
+      },
+      onCompositionEnd: (e) => {
+        e.stopPropagation();
+        const value = e.currentTarget.value;
+        if (shouldActivateSearchSubmenu) {
+          if (value) {
+            activateSearchSubmenu(searchKey);
+          } else {
+            deactivateSearchSubmenu(searchKey);
+          }
+        }
+        searchHandlers.endComposition(searchKey, value);
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+      },
+      onKeyDown: (e) => {
         e.stopPropagation();
-        updateSearchValue(searchKey, e.target.value);
       },
-      onClick: (e) => e.stopPropagation(),
       onMouseDown: (e) => {
         e.stopPropagation();
       },
@@ -286,14 +404,26 @@ const createEmptyItem = /* @__PURE__ */ __name((itemKey, t) => ({
   label: /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "16px", textAlign: "center" } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Empty, { image: import_antd.Empty.PRESENTED_IMAGE_SIMPLE, description: t("No data"), style: { margin: 0 } })),
   disabled: true
 }), "createEmptyItem");
+const KEEP_OPEN_LABEL_STYLE = {
+  display: "block",
+  width: "100%"
+};
 const DROPDOWN_PERSIST_TTL_MS = 350;
+const SUBMENU_CLOSE_DELAY = 0.05;
+const SUBMENU_MOTION_DISABLED = {
+  motionEnter: false,
+  motionLeave: false
+};
 const dropdownPersistRegistry = /* @__PURE__ */ new Map();
 const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
   const engine = (0, import_provider.useFlowEngine)();
   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 closeByOutsideClickRef = (0, import_react.useRef)(false);
+  const skipPreserveActiveSearchRef = (0, import_react.useRef)(false);
   const dropdownMaxHeight = useNiceDropdownMaxHeight();
   const t = engine.translate.bind(engine);
   const { items: menuItems, keepDropdownOpen, persistKey, stateVersion, refreshKeys, ...dropdownMenuProps } = menu;
@@ -304,9 +434,89 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
     openKeys,
     refreshKeys
   );
-  const { searchValues, isSearching, updateSearchValue } = useMenuSearch();
+  const searchHandlers = useMenuSearch();
+  const { searchValues, inputValues, clearSearchValue, clearAllSearchValues } = searchHandlers;
   const { requestKeepOpen, shouldPreventClose } = useKeepDropdownOpen();
   useSubmenuStyles(menuVisible, dropdownMaxHeight);
+  const closeMenu = (0, import_react.useCallback)(() => {
+    setMenuVisible(false);
+    setActiveSearchKey(null);
+    setOpenKeys(/* @__PURE__ */ new Set());
+    clearAllSearchValues();
+  }, [clearAllSearchValues]);
+  const activateSearchSubmenu = (0, import_react.useCallback)((key) => {
+    setActiveSearchKey(key);
+    setOpenKeys((prev) => {
+      if (prev.has(key)) return prev;
+      const next = new Set(prev);
+      next.add(key);
+      return next;
+    });
+  }, []);
+  const deactivateSearchSubmenu = (0, import_react.useCallback)((key) => {
+    setActiveSearchKey((prev) => prev === key ? null : prev);
+  }, []);
+  const closeActiveSearchForPath = (0, import_react.useCallback)(
+    (keyPath) => {
+      if (!activeSearchKey || keyPath === activeSearchKey || keyPath.startsWith(`${activeSearchKey}/`) || activeSearchKey.startsWith(`${keyPath}/`)) {
+        return;
+      }
+      skipPreserveActiveSearchRef.current = true;
+      clearSearchValue(activeSearchKey);
+      setActiveSearchKey(null);
+      setOpenKeys((prev) => {
+        const next = new Set(prev);
+        next.delete(activeSearchKey);
+        return next;
+      });
+    },
+    [activeSearchKey, 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) {
+          clearSearchValue(activeSearchKey);
+          setActiveSearchKey(null);
+        } else {
+          normalized = [activeSearchKey];
+        }
+      }
+      if (!normalized.length && shouldPreventClose()) {
+        (_a = dropdownMenuProps.onOpenChange) == null ? void 0 : _a.call(dropdownMenuProps, Array.from(openKeys));
+        skipPreserveActiveSearchRef.current = false;
+        return;
+      }
+      Array.from(openKeys).forEach((key) => {
+        if (!normalized.includes(key)) {
+          clearSearchValue(key);
+        }
+      });
+      setOpenKeys(new Set(normalized));
+      (_b = dropdownMenuProps.onOpenChange) == null ? void 0 : _b.call(dropdownMenuProps, normalized);
+      skipPreserveActiveSearchRef.current = false;
+    },
+    [activeSearchKey, 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"));
+      closeByOutsideClickRef.current = isOutside;
+      if (isOutside) {
+        closeMenu();
+      }
+    }, "markOutsideClick");
+    document.addEventListener("pointerdown", markOutsideClick, true);
+    document.addEventListener("mousedown", markOutsideClick, true);
+    return () => {
+      document.removeEventListener("pointerdown", markOutsideClick, true);
+      document.removeEventListener("mousedown", markOutsideClick, true);
+    };
+  }, [closeMenu, menuVisible]);
   (0, import_react.useEffect)(() => {
     if (!persistKey) return;
     const until = dropdownPersistRegistry.get(persistKey) || 0;
@@ -326,6 +536,11 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
       }
     };
   }, [persistKey, menuVisible]);
+  (0, import_react.useEffect)(() => {
+    if (!menuVisible) {
+      setOpenKeys(/* @__PURE__ */ new Set());
+    }
+  }, [menuVisible]);
   (0, import_react.useEffect)(() => {
     const loadRootItems = /* @__PURE__ */ __name(async () => {
       let resolvedItems;
@@ -347,15 +562,13 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
   function buildSearchChildren(children, item, keyPath, path, menuVisible2, resolve) {
     const searchKey = keyPath;
     const currentSearchValue = searchValues[searchKey] || "";
+    const currentInputValue = inputValues[searchKey] ?? currentSearchValue;
+    const shouldActivateSearchSubmenu = !(item.type === "group" && path.length === 0);
     const filteredChildren = currentSearchValue ? (/* @__PURE__ */ __name(function deepFilter(items2) {
       const searchText = currentSearchValue.toLowerCase();
-      const tryString = /* @__PURE__ */ __name((v) => {
-        if (!v) return "";
-        return typeof v === "string" ? v : String(v);
-      }, "tryString");
       return items2.map((child) => {
-        const labelStr = tryString(child.label).toLowerCase();
-        const selfMatch = labelStr.includes(searchText) || child.key && String(child.key).toLowerCase().includes(searchText);
+        const labelStr = getLabelSearchText(child.label).toLowerCase();
+        const selfMatch = labelStr.includes(searchText);
         if (child.type === "group" && Array.isArray(child.children)) {
           const nested = deepFilter(child.children);
           if (selfMatch || nested.length > 0) {
@@ -367,7 +580,17 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
       }).filter(Boolean);
     }, "deepFilter"))(children) : children;
     const resolvedFiltered = resolve(filteredChildren, [...path, item.key]);
-    const searchItem = createSearchItem(item, searchKey, currentSearchValue, menuVisible2, t, updateSearchValue);
+    const searchItem = createSearchItem(
+      item,
+      searchKey,
+      currentInputValue,
+      menuVisible2,
+      t,
+      searchHandlers,
+      activateSearchSubmenu,
+      deactivateSearchSubmenu,
+      shouldActivateSearchSubmenu
+    );
     const dividerItem = { key: `${keyPath}-search-divider`, type: "divider" };
     if (currentSearchValue && resolvedFiltered.length === 0) {
       return [searchItem, dividerItem, createEmptyItem(keyPath, t)];
@@ -419,51 +642,68 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
       if (item.type === "divider") {
         return { type: "divider", key: keyPath };
       }
+      const label = typeof item.label === "string" ? t(item.label) : item.label;
       if (item.searchable && children) {
         return {
-          key: item.key,
-          label: typeof item.label === "string" ? t(item.label) : item.label,
+          key: keyPath,
+          label,
           onClick: /* @__PURE__ */ __name((info) => {
           }, "onClick"),
-          onMouseEnter: /* @__PURE__ */ __name(() => {
-            setOpenKeys((prev) => {
-              if (prev.has(keyPath)) return prev;
-              const next = new Set(prev);
-              next.add(keyPath);
-              return next;
-            });
-          }, "onMouseEnter"),
+          onMouseEnter: /* @__PURE__ */ __name(() => closeActiveSearchForPath(keyPath), "onMouseEnter"),
           children: buildSearchChildren(children, item, keyPath, path, menuVisible, resolveItems)
         };
       }
+      const itemShouldKeepOpen = !children && (item.keepDropdownOpen ?? keepDropdownOpen ?? false);
+      const handleLeafClick = /* @__PURE__ */ __name((info) => {
+        var _a;
+        if (children) {
+          return;
+        }
+        if (itemShouldKeepOpen) {
+          requestKeepOpen();
+        }
+        const extendedInfo = {
+          ...info,
+          key: (info == null ? void 0 : info.key) ?? keyPath,
+          keyPath: (info == null ? void 0 : info.keyPath) ?? [keyPath],
+          item: (info == null ? void 0 : info.item) || item,
+          originalItem: item,
+          keepDropdownOpen: itemShouldKeepOpen
+        };
+        (_a = menu.onClick) == null ? void 0 : _a.call(menu, extendedInfo);
+      }, "handleLeafClick");
       return {
         key: keyPath,
-        label: typeof item.label === "string" ? t(item.label) : item.label,
+        label: itemShouldKeepOpen ? /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            style: KEEP_OPEN_LABEL_STYLE,
+            onMouseDown: (event) => {
+              event.stopPropagation();
+              requestKeepOpen();
+            },
+            onClick: (event) => {
+              event.stopPropagation();
+              handleLeafClick({
+                key: keyPath,
+                keyPath: [keyPath],
+                item,
+                domEvent: event
+              });
+            }
+          },
+          label
+        ) : label,
         onClick: /* @__PURE__ */ __name((info) => {
-          var _a;
-          if (children) {
+          if (!itemShouldKeepOpen) handleLeafClick(info);
+        }, "onClick"),
+        onMouseEnter: /* @__PURE__ */ __name(() => closeActiveSearchForPath(keyPath), "onMouseEnter"),
+        onMouseDown: /* @__PURE__ */ __name(() => {
+          if (!itemShouldKeepOpen) {
             return;
           }
-          const itemShouldKeepOpen = item.keepDropdownOpen ?? keepDropdownOpen ?? false;
-          if (itemShouldKeepOpen) {
-            requestKeepOpen();
-          }
-          const extendedInfo = {
-            ...info,
-            item: info.item || item,
-            originalItem: item,
-            keepDropdownOpen: itemShouldKeepOpen
-          };
-          (_a = menu.onClick) == null ? void 0 : _a.call(menu, extendedInfo);
-        }, "onClick"),
-        onMouseEnter: /* @__PURE__ */ __name(() => {
-          setOpenKeys((prev) => {
-            if (prev.has(keyPath)) return prev;
-            const next = new Set(prev);
-            next.add(keyPath);
-            return next;
-          });
-        }, "onMouseEnter"),
+          requestKeepOpen();
+        }, "onMouseDown"),
         children: children && children.length > 0 ? resolveItems(children, [...path, item.key]) : children && children.length === 0 ? [createEmptyItem(keyPath, t)] : void 0
       };
     });
@@ -498,23 +738,32 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
       placement: "bottomLeft",
       menu: {
         ...dropdownMenuProps,
+        openKeys: Array.from(openKeys),
         items,
+        subMenuCloseDelay: dropdownMenuProps.subMenuCloseDelay ?? SUBMENU_CLOSE_DELAY,
+        motion: dropdownMenuProps.motion ?? SUBMENU_MOTION_DISABLED,
         onClick: /* @__PURE__ */ __name(() => {
         }, "onClick"),
+        onOpenChange: handleMenuOpenChange,
         style: {
           maxHeight: dropdownMaxHeight,
           overflowY: "auto",
           ...dropdownMenuProps == null ? void 0 : dropdownMenuProps.style
         }
       },
-      onOpenChange: (visible) => {
-        if (!visible && isSearching) {
+      onOpenChange: (visible, info) => {
+        if (!visible && activeSearchKey && (info == null ? void 0 : info.source) === "trigger" && !closeByOutsideClickRef.current) {
           return;
         }
         if (!visible && shouldPreventClose()) {
           return;
         }
-        setMenuVisible(visible);
+        if (!visible) {
+          closeMenu();
+        } else {
+          setMenuVisible(visible);
+        }
+        closeByOutsideClickRef.current = false;
       }
     },
     props.children

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

@@ -7,4 +7,5 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 export * from './AddSubModelButton';
+export { default as LazyDropdown } from './LazyDropdown';
 export * from './utils';

package/lib/components/subModel/index.js

@@ -7,10 +7,16 @@
  * 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 __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))
@@ -20,13 +26,26 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+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 subModel_exports = {};
+__export(subModel_exports, {
+  LazyDropdown: () => import_LazyDropdown.default
+});
 module.exports = __toCommonJS(subModel_exports);
 __reExport(subModel_exports, require("./AddSubModelButton"), module.exports);
+var import_LazyDropdown = __toESM(require("./LazyDropdown"));
 __reExport(subModel_exports, require("./utils"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  LazyDropdown,
   ...require("./AddSubModelButton"),
   ...require("./utils")
 });

package/lib/components/subModel/utils.d.ts

@@ -19,6 +19,7 @@ export interface BuildFieldChildrenOptions {
     fieldUseModel?: string | ((field: any) => string);
     collection?: Collection;
     associationPathName?: string;
+    maxAssociationFieldDepth?: number;
     /**
      * 点击这些子项后，除自身路径外，还需要联动刷新的其他菜单路径前缀
      */
@@ -29,6 +30,6 @@ export declare function buildWrapperFieldChildren(ctx: FlowModelContext, options
     label: string;
     type: "group";
     searchable: boolean;
-    searchPlaceholder: any;
+    searchPlaceholder: string;
     children: SubModelItem[];
 }[];

package/lib/components/subModel/utils.js

@@ -44,7 +44,7 @@ __export(utils_exports, {
   buildWrapperFieldChildren: () => buildWrapperFieldChildren
 });
 module.exports = __toCommonJS(utils_exports);
-var _ = __toESM(require("lodash"));
+var import_lodash = __toESM(require("lodash"));
 var import_utils = require("../../utils");
 async function callHideFunction(hide, ctx) {
   if (typeof hide === "function") {
@@ -107,7 +107,7 @@ function buildSubModelChildren(M, ctx) {
             const extraArg = args && args.length > 0 ? args[args.length - 1] : void 0;
             const defaultOpts = await (0, import_utils.resolveCreateModelOptions)(meta == null ? void 0 : meta.createModelOptions, ctx, extraArg);
             const childOpts = await (0, import_utils.resolveCreateModelOptions)(src, ctx, extraArg);
-            return _.merge({}, _.cloneDeep(defaultOpts), childOpts);
+            return import_lodash.default.merge({}, import_lodash.default.cloneDeep(defaultOpts), childOpts);
           };
         }
         return node;
@@ -172,7 +172,7 @@ function buildSubModelItems(subModelBaseClass, exclude = []) {
 __name(buildSubModelItems, "buildSubModelItems");
 function buildSubModelGroups(subModelBaseClasses = []) {
   return async (ctx) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const items = [];
     const exclude = [];
     for (const subModelBaseClass of subModelBaseClasses) {
@@ -203,11 +203,15 @@ function buildSubModelGroups(subModelBaseClasses = []) {
       const baseKey = typeof subModelBaseClass === "string" ? subModelBaseClass : BaseClass.name;
       const menuType = ((_b = BaseClass == null ? void 0 : BaseClass.meta) == null ? void 0 : _b.menuType) || "group";
       const groupSort = ((_c = BaseClass == null ? void 0 : BaseClass.meta) == null ? void 0 : _c.sort) ?? 1e3;
+      const searchable = !!((_d = BaseClass == null ? void 0 : BaseClass.meta) == null ? void 0 : _d.searchable);
+      const searchPlaceholder = (_e = BaseClass == null ? void 0 : BaseClass.meta) == null ? void 0 : _e.searchPlaceholder;
       if (menuType === "submenu") {
         items.push({
           key: baseKey,
           label: groupLabel,
           sort: groupSort,
+          searchable,
+          searchPlaceholder,
           children
         });
       } else {
@@ -216,6 +220,8 @@ function buildSubModelGroups(subModelBaseClasses = []) {
           type: "group",
           label: groupLabel,
           sort: groupSort,
+          searchable,
+          searchPlaceholder,
           children
         });
       }
@@ -225,14 +231,18 @@ function buildSubModelGroups(subModelBaseClasses = []) {
 }
 __name(buildSubModelGroups, "buildSubModelGroups");
 function buildWrapperFieldChildren(ctx, options) {
-  var _a;
-  const { useModel, fieldUseModel, associationPathName, refreshTargets } = options;
+  var _a, _b;
+  const { useModel, fieldUseModel, associationPathName, refreshTargets, maxAssociationFieldDepth = 2 } = options;
   const collection = options.collection || ctx.model["collection"] || ctx.collection;
   const fields = collection.getFields();
   const defaultItemKeys = ["fieldSettings", "init"];
   const children = [];
+  const associationDepth = associationPathName ? associationPathName.split(".").filter(Boolean).length : 0;
   for (const f of fields) {
     if (!((_a = f == null ? void 0 : f.options) == null ? void 0 : _a.interface)) continue;
+    if (associationDepth >= maxAssociationFieldDepth && (((_b = f.isAssociationField) == null ? void 0 : _b.call(f)) || f.target || f.targetCollection)) {
+      continue;
+    }
     const fieldPath = associationPathName ? `${associationPathName}.${f.name}` : f.name;
     const childUse = typeof fieldUseModel === "function" ? fieldUseModel(f) : fieldUseModel ?? "FieldModel";
     if (childUse) {

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

@@ -0,0 +1,27 @@
+/**
+ * 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 { MetaTreeNode } from '../../flowContext';
+export interface VariableHybridInputConverters {
+    formatPathToValue?: (item?: MetaTreeNode) => string | undefined;
+    parseValueToPath?: (value?: string) => string[] | undefined;
+    variableRegExp?: RegExp;
+}
+export interface VariableHybridInputProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    addonBefore?: React.ReactNode;
+    metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
+    converters?: VariableHybridInputConverters;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const VariableHybridInput: React.NamedExoticComponent<VariableHybridInputProps>;