@nocobase/flow-engine 2.2.0-beta.14 → 2.2.0-beta.15

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,9 +242,9 @@ 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) => {
       const lastOption = selectedOptions == null ? void 0 : selectedOptions[selectedOptions.length - 1];
@@ -289,12 +312,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 +349,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/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>;

package/lib/components/variables/VariableHybridInput.js

@@ -42,6 +42,7 @@ __export(VariableHybridInput_exports, {
 module.exports = __toCommonJS(VariableHybridInput_exports);
 var import_css = require("@emotion/css");
 var import_antd = require("antd");
+var import_context = require("antd/es/form/context");
 var import_react = __toESM(require("react"));
 var import_FlowContextProvider = require("../../FlowContextProvider");
 var import_FlowContextSelector = require("../FlowContextSelector");
@@ -83,14 +84,28 @@ function normalizeVariableKey(value) {
   return value.replace(/^\{\{\s*/, "").replace(/\s*\}\}$/, "").trim();
 }
 __name(normalizeVariableKey, "normalizeVariableKey");
-function renderHTML(value, labelMap, regExp) {
+function renderHTML(value, regExp, resolveLabel) {
   const re = new RegExp(regExp.source, regExp.flags.includes("g") ? regExp.flags : `${regExp.flags}g`);
   return escapeHtml(value || "").replace(re, (matched) => {
-    const label = labelMap.get(normalizeVariableKey(matched)) || matched;
+    const label = resolveLabel(matched) || matched;
     return createTagHTML(matched, label);
   });
 }
 __name(renderHTML, "renderHTML");
+function resolveTitlesByPath(roots, path, ctxT) {
+  if (!roots || !path || !path.length) return void 0;
+  const titles = [];
+  let nodes = roots;
+  for (const segment of path) {
+    if (!nodes) return void 0;
+    const matched = nodes.find((node) => node.name === segment);
+    if (!matched) return void 0;
+    titles.push(reactNodeToPlainText(matched.title || matched.name));
+    nodes = Array.isArray(matched.children) ? matched.children : void 0;
+  }
+  return titles.map(ctxT).join("/");
+}
+__name(resolveTitlesByPath, "resolveTitlesByPath");
 function buildLabelMap(nodes, ctxT, converters) {
   const map = /* @__PURE__ */ new Map();
   function walk(items = [], parentTitles = []) {
@@ -112,6 +127,34 @@ function buildLabelMap(nodes, ctxT, converters) {
   return map;
 }
 __name(buildLabelMap, "buildLabelMap");
+function collectReferencePaths(value, regExp, parseValueToPath) {
+  const re = new RegExp(regExp.source, regExp.flags.includes("g") ? regExp.flags : `${regExp.flags}g`);
+  const paths = [];
+  for (const matched of value.match(re) ?? []) {
+    const path = parseValueToPath(matched);
+    if (path && path.length) {
+      paths.push(path);
+    }
+  }
+  return paths;
+}
+__name(collectReferencePaths, "collectReferencePaths");
+async function preloadReferencePath(path, roots) {
+  let nodes = roots;
+  let didLoad = false;
+  for (const segment of path) {
+    if (!nodes) break;
+    const matched = nodes.find((node) => node.name === segment);
+    if (!matched) break;
+    if (typeof matched.children === "function") {
+      matched.children = await (0, import_utils.loadMetaTreeChildren)(matched);
+      didLoad = true;
+    }
+    nodes = Array.isArray(matched.children) ? matched.children : void 0;
+  }
+  return didLoad;
+}
+__name(preloadReferencePath, "preloadReferencePath");
 function pasteHTML(container, html, indexes) {
   var _a;
   const selection = (_a = window.getSelection) == null ? void 0 : _a.call(window);
@@ -213,21 +256,64 @@ function getCurrentRange(element) {
 }
 __name(getCurrentRange, "getCurrentRange");
 const VariableHybridInputComponent = /* @__PURE__ */ __name((props) => {
-  const { addonBefore, className, converters, disabled, metaTree, onChange, placeholder, style } = props;
+  var _a;
+  const { addonBefore, className, converters, disabled, metaTree, onChange, placeholder, readOnly, style } = props;
   const { token } = import_antd.theme.useToken();
   const ctx = (0, import_FlowContextProvider.useFlowContext)();
   const { resolvedMetaTree } = (0, import_useResolvedMetaTree.useResolvedMetaTree)(metaTree);
+  const formItemStatus = (_a = (0, import_react.useContext)(import_context.FormItemInputContext)) == null ? void 0 : _a.status;
+  const effectiveStatus = props.status ?? formItemStatus;
   const inputRef = (0, import_react.useRef)(null);
   const [isComposing, setIsComposing] = (0, import_react.useState)(false);
   const [changed, setChanged] = (0, import_react.useState)(false);
   const [range, setRange] = (0, import_react.useState)([-1, 0, -1, 0]);
   const value = typeof props.value === "string" ? props.value : props.value == null ? "" : String(props.value);
   const variableRegExp = (converters == null ? void 0 : converters.variableRegExp) ?? DEFAULT_VARIABLE_REGEXP;
+  const parseValueToPath = (converters == null ? void 0 : converters.parseValueToPath) ?? import_utils.parseValueToPath;
+  const [loadedFlag, setLoadedFlag] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    if (!value || !Array.isArray(resolvedMetaTree) || !resolvedMetaTree.length) {
+      return;
+    }
+    const paths = collectReferencePaths(value, variableRegExp, parseValueToPath);
+    if (!paths.length) {
+      return;
+    }
+    let cancelled = false;
+    const run = /* @__PURE__ */ __name(async () => {
+      let didLoad = false;
+      for (const path of paths) {
+        const loaded = await preloadReferencePath(path, resolvedMetaTree);
+        if (cancelled) return;
+        didLoad = didLoad || loaded;
+      }
+      if (didLoad && !cancelled) {
+        setLoadedFlag((prev) => prev + 1);
+      }
+    }, "run");
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [value, resolvedMetaTree, variableRegExp, parseValueToPath]);
   const labelMap = (0, import_react.useMemo)(
     () => buildLabelMap(resolvedMetaTree, ctx.t, converters),
-    [resolvedMetaTree, ctx, converters]
+    // `loadedFlag` is read so the map recomputes after a lazy level resolves.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [resolvedMetaTree, ctx, converters, loadedFlag]
   );
-  const [html, setHtml] = (0, import_react.useState)(() => renderHTML(value, labelMap, variableRegExp));
+  const resolveLabel = (0, import_react.useCallback)(
+    (matched) => {
+      const mapped = labelMap.get(normalizeVariableKey(matched));
+      if (mapped) return mapped;
+      const path = parseValueToPath(matched);
+      return resolveTitlesByPath(resolvedMetaTree, path, ctx.t);
+    },
+    // `loadedFlag` is read so a resolved lazy level re-creates this callback and re-renders the tags. `ctx` carries the translation fn.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [labelMap, parseValueToPath, resolvedMetaTree, ctx, loadedFlag]
+  );
+  const [html, setHtml] = (0, import_react.useState)(() => renderHTML(value, variableRegExp, resolveLabel));
   const emitChange = (0, import_react.useCallback)(
     (target) => {
       onChange == null ? void 0 : onChange(getDomValue(target).trim());
@@ -235,20 +321,20 @@ const VariableHybridInputComponent = /* @__PURE__ */ __name((props) => {
     [onChange]
   );
   (0, import_react.useEffect)(() => {
-    setHtml(renderHTML(value, labelMap, variableRegExp));
+    setHtml(renderHTML(value, variableRegExp, resolveLabel));
     if (!changed) {
       setRange([-1, 0, -1, 0]);
     }
-  }, [value, labelMap]);
+  }, [value, resolveLabel]);
   (0, import_react.useEffect)(() => {
-    var _a;
+    var _a2;
     const element = inputRef.current;
     if (!element) return;
     if (document.activeElement !== element) return;
     const nextRange = new Range();
     if (changed) {
       if (range.join() === "-1,0,-1,0") return;
-      const selection = (_a = window.getSelection) == null ? void 0 : _a.call(window);
+      const selection = (_a2 = window.getSelection) == null ? void 0 : _a2.call(window);
       if (!selection) return;
       try {
         const children = Array.from(element.childNodes);
@@ -304,12 +390,13 @@ const VariableHybridInputComponent = /* @__PURE__ */ __name((props) => {
   );
   const handleInput = (0, import_react.useCallback)(
     ({ currentTarget }) => {
+      if (readOnly) return;
       if (isComposing) return;
       setChanged(true);
       setRange(getCurrentRange(currentTarget));
       emitChange(currentTarget);
     },
-    [emitChange, isComposing]
+    [emitChange, isComposing, readOnly]
   );
   const handleBlur = (0, import_react.useCallback)(({ currentTarget }) => {
     setRange(getCurrentRange(currentTarget));
@@ -322,6 +409,7 @@ const VariableHybridInputComponent = /* @__PURE__ */ __name((props) => {
   const handlePaste = (0, import_react.useCallback)(
     (event) => {
       event.preventDefault();
+      if (readOnly) return;
       const text = event.clipboardData.getData("text/plain").replace(/\n/g, " ");
       if (!text) return;
       setChanged(true);
@@ -329,17 +417,18 @@ const VariableHybridInputComponent = /* @__PURE__ */ __name((props) => {
       setRange(getCurrentRange(event.currentTarget));
       emitChange(event.currentTarget);
     },
-    [emitChange]
+    [emitChange, readOnly]
   );
   const handleCompositionStart = (0, import_react.useCallback)(() => setIsComposing(true), []);
   const handleCompositionEnd = (0, import_react.useCallback)(
     ({ currentTarget }) => {
       setIsComposing(false);
+      if (readOnly) return;
       setChanged(true);
       setRange(getCurrentRange(currentTarget));
       emitChange(currentTarget);
     },
-    [emitChange]
+    [emitChange, readOnly]
   );
   const wrapperClassName = (0, import_react.useMemo)(
     () => import_css.css`
@@ -457,6 +546,42 @@ const VariableHybridInputComponent = /* @__PURE__ */ __name((props) => {
           border-color: ${token.colorBorder};
         }
       }
+
+      &.is-readonly {
+        cursor: default;
+
+        &:hover {
+          border-color: ${token.colorBorder};
+        }
+      }
+
+      &.is-error {
+        border-color: ${token.colorError};
+
+        &:hover {
+          border-color: ${token.colorErrorBorderHover};
+        }
+
+        &:focus,
+        &:focus-visible {
+          border-color: ${token.colorError};
+          box-shadow: 0 0 0 ${token.controlOutlineWidth}px ${token.colorErrorOutline};
+        }
+      }
+
+      &.is-warning {
+        border-color: ${token.colorWarning};
+
+        &:hover {
+          border-color: ${token.colorWarningBorderHover};
+        }
+
+        &:focus,
+        &:focus-visible {
+          border-color: ${token.colorWarning};
+          box-shadow: 0 0 0 ${token.controlOutlineWidth}px ${token.colorWarningOutline};
+        }
+      }
     `;
   }, [token, addonBefore]);
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Space.Compact, { className: (0, import_css.cx)("nb-variable-hybrid-input", wrapperClassName, className), style }, addonBefore != null && /* @__PURE__ */ import_react.default.createElement("span", { className: addonClassName }, addonBefore), /* @__PURE__ */ import_react.default.createElement(
@@ -466,9 +591,13 @@ const VariableHybridInputComponent = /* @__PURE__ */ __name((props) => {
       role: "textbox",
       "aria-label": "textbox",
       className: (0, import_css.cx)(editorClassName, {
-        "is-disabled": disabled
+        "is-disabled": disabled,
+        "is-readonly": readOnly,
+        "is-error": effectiveStatus === "error",
+        "is-warning": effectiveStatus === "warning"
       }),
-      contentEditable: !disabled,
+      contentEditable: !disabled && !readOnly,
+      "aria-readonly": readOnly,
       "data-placeholder": placeholder,
       onInput: handleInput,
       onBlur: handleBlur,
@@ -483,10 +612,10 @@ const VariableHybridInputComponent = /* @__PURE__ */ __name((props) => {
     {
       metaTree,
       disabled,
-      parseValueToPath: (converters == null ? void 0 : converters.parseValueToPath) ?? import_utils.parseValueToPath,
+      parseValueToPath,
       formatPathToValue: (item) => {
-        var _a;
-        return ((_a = converters == null ? void 0 : converters.formatPathToValue) == null ? void 0 : _a.call(converters, item)) || (0, import_utils.formatPathToValue)(item);
+        var _a2;
+        return ((_a2 = converters == null ? void 0 : converters.formatPathToValue) == null ? void 0 : _a2.call(converters, item)) || (0, import_utils.formatPathToValue)(item);
       },
       onChange: handleSelectorChange
     }

package/lib/components/variables/VariableInput.js

@@ -132,16 +132,18 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
     },
     [onChange]
   );
+  const resolvedPath = (0, import_react.useMemo)(() => {
+    return resolvePathFromValue == null ? void 0 : resolvePathFromValue(innerValue);
+  }, [innerValue, resolvePathFromValue]);
   const resolvedMetaTreeNode = (0, import_react.useMemo)(() => {
     if (currentMetaTreeNode) return currentMetaTreeNode;
     if (Array.isArray(resolvedMetaTree)) {
-      const path = resolvePathFromValue == null ? void 0 : resolvePathFromValue(innerValue);
-      if (path) {
-        return findMetaTreeNodeByPath(resolvedMetaTree, path);
+      if (resolvedPath) {
+        return findMetaTreeNodeByPath(resolvedMetaTree, resolvedPath);
       }
     }
     return null;
-  }, [currentMetaTreeNode, innerValue, resolvedMetaTree, resolvePathFromValue]);
+  }, [currentMetaTreeNode, resolvedMetaTree, resolvedPath]);
   (0, import_react.useEffect)(() => {
     const restoreFromValue = /* @__PURE__ */ __name(async () => {
       if (!Array.isArray(resolvedMetaTree) || value == null) return;
@@ -188,13 +190,17 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
       }
     }, "restoreFromValue");
     restoreFromValue();
-  }, [resolvedMetaTree, innerValue, resolvePathFromValue, currentMetaTreeNode]);
+  }, [resolvedMetaTree, innerValue, resolvePathFromValue, currentMetaTreeNode, value]);
   const ValueComponent = (0, import_react.useMemo)(() => {
     const Component = renderInputComponent == null ? void 0 : renderInputComponent(resolvedMetaTreeNode);
     const CustomComponent = resolvedMetaTreeNode == null ? void 0 : resolvedMetaTreeNode.render;
-    const finalComponent = (0, import_utils.isVariableValue)(innerValue) ? import_VariableTag.VariableTag : Component || CustomComponent || import_antd.Input;
+    const shouldRenderVariableTag = (0, import_utils.isVariableValue)(innerValue) || Array.isArray(resolvedPath) && resolvedPath.length > 0 && !Component && !CustomComponent;
+    const finalComponent = shouldRenderVariableTag ? import_VariableTag.VariableTag : Component || CustomComponent || import_antd.Input;
     return finalComponent;
-  }, [renderInputComponent, resolvedMetaTreeNode, innerValue]);
+  }, [renderInputComponent, resolvedMetaTreeNode, innerValue, resolvedPath]);
+  const isVariableActive = (0, import_react.useMemo)(() => {
+    return (0, import_utils.isVariableValue)(innerValue) || Array.isArray(resolvedPath) && resolvedPath.length > 0 && !(renderInputComponent == null ? void 0 : renderInputComponent(resolvedMetaTreeNode)) && !(resolvedMetaTreeNode == null ? void 0 : resolvedMetaTreeNode.render);
+  }, [innerValue, renderInputComponent, resolvedMetaTreeNode, resolvedPath]);
   (0, import_react.useEffect)(() => {
     if (!resolvedMetaTreeNode) return;
     if (!Array.isArray(resolvedMetaTree) || innerValue == null) return;
@@ -278,8 +284,11 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
       return {
         ...baseProps,
         onClear: handleClear,
+        disabled,
+        allowCustomTagInput: false,
         metaTreeNode: resolvedMetaTreeNode,
         metaTree,
+        resolvedPath,
         style: stableProps.style
       };
     }
@@ -300,6 +309,7 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
     disabled,
     handleClear,
     resolvedMetaTreeNode,
+    resolvedPath,
     metaTree,
     ValueComponent,
     stableProps
@@ -325,6 +335,8 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
     {
       metaTree: resolvedMetaTree,
       value: innerValue,
+      active: isVariableActive,
+      disabled,
       onChange: handleVariableSelect,
       parseValueToPath: resolvePathFromValue,
       formatPathToValue: resolveValueFromPath,