@nocobase/flow-engine 2.2.0-beta.9 → 2.2.1

package/lib/acl/Acl.d.ts

@@ -5,7 +5,7 @@ interface CheckOptions {
     actionName: string;
     fields?: string[];
     recordPkValue?: string | number;
-    allowedActions: any[];
+    allowedActions?: Record<string, Array<string | number>>;
 }
 export declare class ACL {
     private flowEngine;
@@ -26,6 +26,7 @@ export declare class ACL {
     verifyScope: (actionName: string, recordPkValue: any, allowedActions: any) => boolean;
     parseAction(options: CheckOptions): any;
     parseField(options: CheckOptions): boolean;
+    can(options: CheckOptions): boolean;
     aclCheck(options: CheckOptions): Promise<boolean>;
 }
 export {};

package/lib/acl/Acl.js

@@ -154,6 +154,34 @@ const _ACL = class _ACL {
     const allowed = whitelist.includes(fields[0]);
     return allowed;
   }
+  can(options) {
+    var _a;
+    const { allowAll } = this.data;
+    if (allowAll) {
+      return true;
+    }
+    const { actionName, allowedActions, recordPkValue } = options;
+    const hasRecordPkValue = recordPkValue !== void 0 && recordPkValue !== null;
+    const recordPermission = hasRecordPkValue && allowedActions ? this.verifyScope(actionName, recordPkValue, allowedActions) : null;
+    if (hasRecordPkValue && allowedActions && recordPermission !== true) {
+      return false;
+    }
+    const params = this.parseAction(options);
+    if (!params) {
+      return false;
+    }
+    if (!import_lodash.default.isEmpty(params.filter) && recordPermission !== true) {
+      return false;
+    }
+    if (!((_a = options.fields) == null ? void 0 : _a.length)) {
+      return true;
+    }
+    const allowedFields = [].concat(params.whitelist || []).concat(params.fields || []).concat(params.appends || []);
+    if (!allowedFields.length) {
+      return true;
+    }
+    return options.fields.every((field) => allowedFields.includes(field));
+  }
   async aclCheck(options) {
     const { allowAll } = this.data;
     if (allowAll) {

package/lib/components/FlowContextSelector.js

@@ -57,6 +57,15 @@ const cascaderPopupAutoHeightClassName = import_css.css`
     max-height: 50vh;
   }
 `;
+function getMetaNodeTooltip(meta) {
+  if (!meta) {
+    return void 0;
+  }
+  const metaWithTooltip = meta;
+  const options = meta.options;
+  return metaWithTooltip.tooltip ?? (options == null ? void 0 : options.tooltip);
+}
+__name(getMetaNodeTooltip, "getMetaNodeTooltip");
 const normalizePath = /* @__PURE__ */ __name((path) => {
   if (!Array.isArray(path)) {
     return void 0;
@@ -90,6 +99,7 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
   value,
   onChange,
   children,
+  active,
   metaTree,
   showSearch = false,
   parseValueToPath: customParseValueToPath = import_utils.parseValueToPath,
@@ -97,6 +107,7 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
   open,
   onlyLeafSelectable = false,
   ignoreFieldNames,
+  dropdownFooter,
   ...cascaderProps
 }) => {
   const { token } = import_antd.theme.useToken();
@@ -111,15 +122,27 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
         const disabled = meta ? !!(typeof meta.disabled === "function" ? meta.disabled() : meta.disabled) : false;
         const disabledReason = meta ? typeof meta.disabledReason === "function" ? meta.disabledReason() : meta.disabledReason : void 0;
         const baseLabel = typeof o.label === "string" ? flowCtx.t(o.label) : o.label;
-        const label = disabled ? /* @__PURE__ */ import_react.default.createElement("span", null, baseLabel, /* @__PURE__ */ import_react.default.createElement(
+        const labelText = typeof baseLabel === "string" ? baseLabel : String(o.value);
+        const tooltip = getMetaNodeTooltip(meta);
+        const tooltipTitle = disabled ? disabledReason || tooltip || flowCtx.t("This variable is not available") : tooltip;
+        const label = tooltipTitle ? /* @__PURE__ */ import_react.default.createElement("span", null, baseLabel, /* @__PURE__ */ import_react.default.createElement(
           import_antd.Tooltip,
           {
-            title: disabledReason || flowCtx.t("This variable is not available"),
-            placement: "right",
-            overlayClassName: "flow-variable-disabled-tip",
+            title: typeof tooltipTitle === "string" ? flowCtx.t(tooltipTitle) : tooltipTitle,
+            placement: "top",
+            classNames: { root: "flow-variable-tip" },
             destroyTooltipOnHide: true
           },
-          /* @__PURE__ */ import_react.default.createElement(import_icons.QuestionCircleOutlined, { style: { marginLeft: 6, color: "rgba(0,0,0,0.35)" } })
+          /* @__PURE__ */ import_react.default.createElement(
+            import_icons.QuestionCircleOutlined,
+            {
+              "aria-label": `${labelText} tooltip`,
+              style: {
+                marginLeft: token.marginXXS,
+                color: disabled ? token.colorTextDisabled : token.colorTextDescription
+              }
+            }
+          )
         )) : baseLabel;
         return {
           ...o,
@@ -129,7 +152,7 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
         };
       });
     },
-    [flowCtx]
+    [flowCtx, token.colorTextDescription, token.colorTextDisabled, token.marginXXS]
   );
   const [updateFlag, setUpdateFlag] = (0, import_react.useState)(0);
   const [searchText, setSearchText] = (0, import_react.useState)("");
@@ -219,11 +242,12 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
     (0, import_utils.preloadContextSelectorPath)(options, pathToPreload, triggerUpdate);
   }, [options, pathToPreload, triggerUpdate]);
   const defaultChildren = (0, import_react.useMemo)(() => {
-    const hasSelected = currentPath && currentPath.length > 0;
-    return /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: hasSelected ? "primary" : "default", style: defaultButtonStyle }, "x");
-  }, [currentPath]);
+    const hasSelected = active ?? Boolean(currentPath && currentPath.length > 0);
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: hasSelected ? "primary" : "default", style: defaultButtonStyle, disabled: cascaderProps.disabled }, "x");
+  }, [active, cascaderProps.disabled, currentPath]);
   const handleChange = (0, import_react.useCallback)(
     (selectedValues, selectedOptions) => {
+      var _a;
       const lastOption = selectedOptions == null ? void 0 : selectedOptions[selectedOptions.length - 1];
       if (!selectedValues || selectedValues.length === 0) {
         onChange == null ? void 0 : onChange("", lastOption == null ? void 0 : lastOption.meta);
@@ -233,6 +257,7 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
       const path = selectedValues.map(String);
       const pathString = path.join(".");
       const isLeaf = lastOption == null ? void 0 : lastOption.isLeaf;
+      const isSelectable = ((_a = lastOption == null ? void 0 : lastOption.meta) == null ? void 0 : _a.selectable) !== false;
       const now = Date.now();
       let formattedValue;
       if (customFormatPathToValue) {
@@ -244,12 +269,16 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
         formattedValue = (0, import_utils.formatPathToValue)(lastOption == null ? void 0 : lastOption.meta);
       }
       if (isLeaf) {
+        if (!isSelectable) {
+          setTempSelectedPath(path);
+          return;
+        }
         onChange == null ? void 0 : onChange(formattedValue, lastOption == null ? void 0 : lastOption.meta);
         setTempSelectedPath([]);
         return;
       }
       const lastSelected = lastSelectedRef.current;
-      const isDoubleClick = !onlyLeafSelectable && (lastSelected == null ? void 0 : lastSelected.path) === pathString && now - lastSelected.time < 300;
+      const isDoubleClick = isSelectable && !onlyLeafSelectable && (lastSelected == null ? void 0 : lastSelected.path) === pathString && now - lastSelected.time < 300;
       if (isDoubleClick) {
         onChange == null ? void 0 : onChange(formattedValue, lastOption == null ? void 0 : lastOption.meta);
         lastSelectedRef.current = null;
@@ -289,12 +318,32 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
     },
     [cascaderOnDropdownVisibleChange, open]
   );
+  const footerNode = (0, import_react.useMemo)(() => {
+    if (dropdownFooter !== void 0) {
+      return dropdownFooter;
+    }
+    if (onlyLeafSelectable) {
+      return null;
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: import_css.css`
+          padding: 6px 12px;
+          color: ${token.colorTextDescription};
+          border-top: 1px solid ${token.colorSplit};
+          font-size: ${token.fontSizeSM}px;
+        `
+      },
+      flowCtx.t("Double click to choose entire object")
+    );
+  }, [dropdownFooter, onlyLeafSelectable, token, flowCtx]);
   const renderDropdown = (0, import_react.useCallback)(
     (menu) => {
       const cascaderMenuNode = cascaderDropdownRender ? cascaderDropdownRender(menu) : menu;
       const cascaderMenu = import_react.default.isValidElement(cascaderMenuNode) ? cascaderMenuNode : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, cascaderMenuNode);
       if (!isSearchEnabled || children === null) {
-        return cascaderMenu;
+        return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, cascaderMenu, footerNode);
       }
       return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: cascaderSearchInputClassName }, /* @__PURE__ */ import_react.default.createElement(
         import_antd.Input,
@@ -306,9 +355,9 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
           onChange: (e) => setSearchText(e.target.value),
           onKeyDown: (e) => e.stopPropagation()
         }
-      )), cascaderMenu);
+      )), cascaderMenu, footerNode);
     },
-    [cascaderDropdownRender, cascaderSearchInputClassName, children, flowCtx, isSearchEnabled, searchText]
+    [cascaderDropdownRender, cascaderSearchInputClassName, children, flowCtx, isSearchEnabled, searchText, footerNode]
   );
   const inlinePlaceholder = typeof restCascaderProps.placeholder === "string" ? restCascaderProps.placeholder : flowCtx.t("Search");
   const hasSelectedPath = Array.isArray(effectivePath) && effectivePath.length > 0;

package/lib/components/FormItem.js

@@ -77,14 +77,18 @@ const formItemPropKeys = [
   "required",
   "showLabel"
 ];
+const modelInternalPropKeys = ["globalSort"];
 const FormItem = /* @__PURE__ */ __name(({
   children,
   showLabel = true,
   labelWidth,
   ...rest
 }) => {
+  const forwardedRest = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => !modelInternalPropKeys.includes(key))
+  );
   const childProps = Object.fromEntries(
-    Object.entries(rest).filter(([key]) => !formItemPropKeys.includes(key))
+    Object.entries(forwardedRest).filter(([key]) => !formItemPropKeys.includes(key))
   );
   const processedChildren = typeof children === "function" ? children : import_react.default.Children.map(children, (child) => {
     if (import_react.default.isValidElement(child)) {
@@ -92,7 +96,7 @@ const FormItem = /* @__PURE__ */ __name(({
     }
     return child;
   });
-  const { label, labelWrap, colon = true, layout } = rest;
+  const { label, labelWrap, colon = true, layout } = forwardedRest;
   const effectiveLabelWrap = !layout || layout === "vertical" ? true : labelWrap;
   const labelColStyle = layout === "vertical" ? { width: labelWidth, ...verticalFormItemLabelStyle } : { width: labelWidth };
   const renderLabel = /* @__PURE__ */ __name(() => {
@@ -136,15 +140,15 @@ const FormItem = /* @__PURE__ */ __name(({
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Form.Item,
     {
-      ...rest,
-      style: { ...formItemStyle, ...rest.style },
+      ...forwardedRest,
+      style: { ...formItemStyle, ...forwardedRest.style },
       labelCol: { style: labelColStyle },
       layout,
       label: renderLabel(),
       colon: false,
-      extra: rest.extra && /* @__PURE__ */ import_react.default.createElement("span", { style: { whiteSpace: "pre-wrap" } }, rest.extra),
-      tooltip: rest.tooltip && {
-        title: rest.tooltip,
+      extra: forwardedRest.extra && /* @__PURE__ */ import_react.default.createElement("span", { style: { whiteSpace: "pre-wrap" } }, forwardedRest.extra),
+      tooltip: forwardedRest.tooltip && {
+        title: forwardedRest.tooltip,
         overlayInnerStyle: { whiteSpace: "pre-line" }
       }
     },

package/lib/components/MobilePopup.js

@@ -47,15 +47,46 @@ var import_react_i18next = require("react-i18next");
 var import_lazy_helper = require("../lazy-helper");
 const { Popup } = (0, import_lazy_helper.lazy)(() => import("antd-mobile"), "Popup");
 const { CloseOutline } = (0, import_lazy_helper.lazy)(() => import("antd-mobile-icons"), "CloseOutline");
+const getMobilePopupMaxHeight = /* @__PURE__ */ __name(() => {
+  var _a;
+  if (typeof CSS !== "undefined" && ((_a = CSS.supports) == null ? void 0 : _a.call(CSS, "height", "100dvh"))) {
+    return "calc(100dvh - var(--nb-mobile-page-header-height, 46px))";
+  }
+  return "calc(100vh - var(--nb-mobile-page-header-height, 46px))";
+}, "getMobilePopupMaxHeight");
 const MobilePopup = /* @__PURE__ */ __name((props) => {
+  var _a;
   const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
   const { t } = (0, import_react_i18next.useTranslation)();
   const { componentCls, hashId } = (0, import_MobilePopup.useMobileActionDrawerStyle)();
-  const style = (0, import_react.useMemo)(() => {
+  const bodyStyles = (_a = props.styles) == null ? void 0 : _a.body;
+  const defaultMaxHeight = getMobilePopupMaxHeight();
+  const popupStyle = (0, import_react.useMemo)(() => {
+    return {
+      minHeight: (bodyStyles == null ? void 0 : bodyStyles.minHeight) ?? minHeight,
+      height: bodyStyles == null ? void 0 : bodyStyles.height,
+      maxHeight: (bodyStyles == null ? void 0 : bodyStyles.maxHeight) ?? defaultMaxHeight
+    };
+  }, [bodyStyles == null ? void 0 : bodyStyles.height, bodyStyles == null ? void 0 : bodyStyles.maxHeight, bodyStyles == null ? void 0 : bodyStyles.minHeight, defaultMaxHeight, minHeight]);
+  const bodyStyle = (0, import_react.useMemo)(() => {
     return {
-      minHeight
+      padding: 0,
+      maxHeight: defaultMaxHeight,
+      overflowY: "auto",
+      overflowX: "hidden",
+      ...bodyStyles
     };
-  }, [minHeight]);
+  }, [bodyStyles, defaultMaxHeight]);
+  const handleCloseKeyDown = (0, import_react.useCallback)(
+    (event) => {
+      if (event.key !== "Enter" && event.key !== " ") {
+        return;
+      }
+      event.preventDefault();
+      closePopup();
+    },
+    [closePopup]
+  );
   const theme = (0, import_react.useMemo)(() => {
     return {
       token: {
@@ -75,21 +106,19 @@ const MobilePopup = /* @__PURE__ */ __name((props) => {
       onClose: closePopup,
       onMaskClick: closePopup,
       bodyClassName: "nb-mobile-action-drawer-body",
-      bodyStyle: {
-        padding: 0
-      },
-      maskStyle: style,
-      style,
+      bodyStyle,
+      style: popupStyle,
       destroyOnClose: true
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", null, title), /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-title" }, title), /* @__PURE__ */ import_react.default.createElement(
       "span",
       {
         className: "nb-mobile-action-drawer-close-icon",
         onClick: closePopup,
         role: "button",
         tabIndex: 0,
-        "aria-label": t("Close")
+        "aria-label": t("Close"),
+        onKeyDown: handleCloseKeyDown
       },
       /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)
     )),

package/lib/components/MobilePopup.style.js

@@ -127,7 +127,7 @@ const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (toke
         borderBottom: `1px solid ${token.colorSplit}`,
         position: "sticky",
         top: 0,
-        backgroundColor: "white",
+        backgroundColor: token.colorBgContainer,
         zIndex: 1e3,
         // to match the button named 'Add block'
         "& + .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn": {
@@ -137,11 +137,21 @@ const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (toke
       ".nb-mobile-action-drawer-placeholder": {
         display: "inline-block",
         padding: 12,
+        flex: "0 0 auto",
         visibility: "hidden"
       },
+      ".nb-mobile-action-drawer-title": {
+        flex: "1 1 auto",
+        minWidth: 0,
+        overflow: "hidden",
+        textAlign: "center",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      },
       ".nb-mobile-action-drawer-close-icon": {
         display: "inline-block",
         padding: 12,
+        flex: "0 0 auto",
         cursor: "pointer"
       },
       ".nb-mobile-action-drawer-body": {

package/lib/components/subModel/LazyDropdown.js

@@ -44,12 +44,6 @@ var import_css = require("@emotion/css");
 var import_antd = require("antd");
 var import_react = __toESM(require("react"));
 var import_provider = require("../../provider");
-const useNiceDropdownMaxHeight = /* @__PURE__ */ __name(() => {
-  return (0, import_react.useMemo)(() => {
-    const maxHeight = Math.min(window.innerHeight * 0.6, 400);
-    return maxHeight;
-  }, []);
-}, "useNiceDropdownMaxHeight");
 const useAsyncMenuItems = /* @__PURE__ */ __name((menuVisible, rootItems, resetKey, openKeySet, refreshKeys) => {
   const [loadedChildren, setLoadedChildren] = (0, import_react.useState)({});
   const [loadingKeys, setLoadingKeys] = (0, import_react.useState)(/* @__PURE__ */ new Set());
@@ -347,19 +341,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 +363,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 +371,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 +405,8 @@ const KEEP_OPEN_LABEL_STYLE = {
   width: "100%"
 };
 const DROPDOWN_PERSIST_TTL_MS = 350;
-const SUBMENU_CLOSE_DELAY = 0.05;
+const DEFAULT_DROPDOWN_MAX_HEIGHT = 400;
+const MENU_CLOSE_DELAY = 0.3;
 const SUBMENU_MOTION_DISABLED = {
   motionEnter: false,
   motionLeave: false
@@ -417,14 +414,21 @@ 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 { token } = import_antd.theme.useToken();
+  const triggerId = import_react.default.useId();
+  const showArrow = Boolean(props.arrow);
   const [menuVisible, setMenuVisible] = (0, import_react.useState)(false);
+  const [dropdownMaxHeight, setDropdownMaxHeight] = (0, import_react.useState)(DEFAULT_DROPDOWN_MAX_HEIGHT);
   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 dropdownMaxHeight = useNiceDropdownMaxHeight();
+  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 t = engine.translate.bind(engine);
   const { items: menuItems, keepDropdownOpen, persistKey, stateVersion, refreshKeys, ...dropdownMenuProps } = menu;
   const { loadedChildren, loadingKeys, handleLoadChildren } = useAsyncMenuItems(
@@ -438,14 +442,31 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
   const { searchValues, inputValues, clearSearchValue, clearAllSearchValues } = searchHandlers;
   const { requestKeepOpen, shouldPreventClose } = useKeepDropdownOpen();
   useSubmenuStyles(menuVisible, dropdownMaxHeight);
+  (0, import_react.useLayoutEffect)(() => {
+    if (!menuVisible) return;
+    const updateDropdownMaxHeight = /* @__PURE__ */ __name(() => {
+      const trigger = document.querySelector(`.${triggerOpenClassName}`);
+      if (!trigger) return;
+      const triggerRect = trigger.getBoundingClientRect();
+      const placementOffset = token.marginXXS + (showArrow ? token.sizePopupArrow / 2 : 0);
+      const reservedSpace = placementOffset + token.marginXXS;
+      const availableAbove = triggerRect.top - reservedSpace;
+      const availableBelow = window.innerHeight - triggerRect.bottom - reservedSpace;
+      const nextMaxHeight = Math.min(DEFAULT_DROPDOWN_MAX_HEIGHT, Math.max(0, availableAbove, availableBelow));
+      setDropdownMaxHeight(nextMaxHeight);
+    }, "updateDropdownMaxHeight");
+    updateDropdownMaxHeight();
+    window.addEventListener("resize", updateDropdownMaxHeight);
+    return () => window.removeEventListener("resize", updateDropdownMaxHeight);
+  }, [menuVisible, showArrow, token.marginXXS, token.sizePopupArrow, triggerOpenClassName]);
   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 +475,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 +523,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 +543,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 +761,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 +781,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>;