@para-ui/core 5.0.0-beta.9 → 5.0.0

package/es/Empty/index.js

@@ -1,56 +1,57 @@
 import { j as e } from "../_virtual/jsx-runtime.js";
-import u from "clsx";
-import { SmallNull as N, LargeNull as $ } from "./images/index.js";
+import N from "clsx";
+import { SmallNull as $, LargeNull as n } from "./images/index.js";
 import E from "../GlobalContext/useFormatMessage.js";
 import k from "./lang/index.js";
 import v from "../Hooks/useGlobalProps.js";
-import { $prefixCls as n } from "../GlobalContext/constant.js";
+import { $prefixCls as c } from "../GlobalContext/constant.js";
 import './index.css';/* empty css           */
 const C = {
-  large: /* @__PURE__ */ e.jsx($, {}),
-  small: /* @__PURE__ */ e.jsx(N, {})
+  large: /* @__PURE__ */ e.jsx(n, {}),
+  medium: /* @__PURE__ */ e.jsx(n, {}),
+  small: /* @__PURE__ */ e.jsx($, {})
 }, G = (l) => {
   const {
-    className: c,
-    style: p,
+    className: p,
+    style: d,
     size: t = "large",
-    imageStyle: d,
-    image: r = C[t],
+    imageStyle: f,
+    image: m = C[t],
     description: o,
-    showRefresh: f = !1,
-    onRefresh: y,
+    showRefresh: y = !1,
+    onRefresh: g,
     customEmpty: a
-  } = v(l, "Empty"), i = E("Empty", k), g = (j) => {
-    y?.(j);
-  }, s = typeof o < "u" ? o : i({ id: "noData" }), x = typeof s == "string" ? s : "empty";
-  let m = null;
-  const h = f ? /* @__PURE__ */ e.jsxs("span", { className: "empty-description-refresh", children: [
+  } = v(l, "Empty"), i = E("Empty", k), x = (u) => {
+    g?.(u);
+  }, s = typeof o < "u" ? o : i({ id: "noData" }), h = typeof s == "string" ? s : "empty";
+  let r = null;
+  const j = y ? /* @__PURE__ */ e.jsxs("span", { className: "empty-description-refresh", children: [
     i({ id: "click" }),
-    /* @__PURE__ */ e.jsx("span", { onClick: g, children: i({ id: "refresh" }) })
+    /* @__PURE__ */ e.jsx("span", { onClick: x, children: i({ id: "refresh" }) })
   ] }) : null;
-  return typeof r == "string" ? m = /* @__PURE__ */ e.jsx(
+  return typeof m == "string" ? r = /* @__PURE__ */ e.jsx(
     "img",
     {
-      src: r,
-      alt: x
+      src: m,
+      alt: h
     }
-  ) : m = r, /* @__PURE__ */ e.jsx(
+  ) : r = m, /* @__PURE__ */ e.jsx(
     "div",
     {
-      className: u(`${n}-empty`, c, `${n}-empty-${t}`),
-      style: p,
+      className: N(`${c}-empty`, p, `${c}-empty-${t}`),
+      style: d,
       children: a || /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsx(
           "div",
           {
             className: `empty-image ${l?.image ? "" : `empty-image-${t}`}`,
-            style: d,
-            children: m
+            style: f,
+            children: r
           }
         ),
         s && /* @__PURE__ */ e.jsxs("div", { className: "empty-description", children: [
           /* @__PURE__ */ e.jsx(e.Fragment, { children: s }),
-          h
+          j
         ] })
       ] })
     }

package/es/Empty/style/index.css

@@ -1 +1 @@
-.paraui-v4-empty{display:inline-flex;flex-direction:column;align-items:center}.paraui-v4-empty>.empty-image{line-height:0;overflow:hidden}.paraui-v4-empty>.empty-image img{width:100%}.paraui-v4-empty .empty-image-large{width:334px;height:238px}.paraui-v4-empty .empty-image-small{width:120px;height:120px}.paraui-v4-empty>.empty-description{line-height:17px;font-size:14px;font-weight:400;color:#5c6573}.paraui-v4-empty>.empty-description>.empty-description-refresh{display:inline-block}.paraui-v4-empty>.empty-description>.empty-description-refresh span{color:#2e65e6;cursor:pointer}.paraui-v4-empty>.empty-description>.empty-description-refresh span:hover{color:#5783eb}.paraui-v4-empty.paraui-v4-empty-large>.empty-description{margin-top:20px}.paraui-v4-empty.paraui-v4-empty-small>.empty-description{margin-top:10px;font-size:14px}
+.paraui-v4-empty{display:inline-flex;flex-direction:column;align-items:center}.paraui-v4-empty>.empty-image{overflow:hidden;line-height:0}.paraui-v4-empty>.empty-image img{width:100%}.paraui-v4-empty .empty-image-large{width:334px;height:238px}.paraui-v4-empty .empty-image-medium{width:220px;height:180px}.paraui-v4-empty .empty-image-small{width:120px;height:120px}.paraui-v4-empty>.empty-description{font-size:14px;font-weight:400;line-height:17px;color:#5c6573}.paraui-v4-empty>.empty-description>.empty-description-refresh{display:inline-block}.paraui-v4-empty>.empty-description>.empty-description-refresh span{color:#2e65e6;cursor:pointer}.paraui-v4-empty>.empty-description>.empty-description-refresh span:hover{color:#5783eb}.paraui-v4-empty.paraui-v4-empty-large>.empty-description{margin-top:20px}.paraui-v4-empty.paraui-v4-empty-medium>.empty-description{margin-top:15px;font-size:14px}.paraui-v4-empty.paraui-v4-empty-small>.empty-description{margin-top:10px;font-size:14px}

package/es/ExpressionInput/HighlightOverlay.d.ts

@@ -0,0 +1,8 @@
+import { HighlightSegment } from './highlightSegments';
+import * as React from 'react';
+export interface HighlightOverlayProps {
+    segments: HighlightSegment[];
+    style?: React.CSSProperties;
+}
+declare const HighlightOverlay: React.ForwardRefExoticComponent<HighlightOverlayProps & React.RefAttributes<HTMLDivElement>>;
+export default HighlightOverlay;

package/es/ExpressionInput/HighlightOverlay.js

@@ -0,0 +1,27 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import * as e from "react";
+import { $prefixCls as t } from "../GlobalContext/constant.js";
+const o = e.forwardRef(({ segments: s, style: l }, h) => /* @__PURE__ */ r.jsx(
+  "div",
+  {
+    ref: h,
+    "aria-hidden": "true",
+    className: `${t}-expression-input-overlay`,
+    style: l,
+    children: s.map(
+      (i, a) => i.highlight ? /* @__PURE__ */ r.jsx(
+        "span",
+        {
+          className: `${t}-expression-input-overlay-highlight`,
+          children: i.text
+        },
+        a
+      ) : /* @__PURE__ */ r.jsx(e.Fragment, { children: i.text }, a)
+    )
+  }
+));
+o.displayName = "HighlightOverlay";
+export {
+  o as default
+};
+//# sourceMappingURL=HighlightOverlay.js.map

package/es/ExpressionInput/Popup.d.ts

@@ -0,0 +1,19 @@
+import { ExprCandidate } from './interface';
+import * as React from 'react';
+export interface PopupRect {
+    top: number;
+    left: number;
+    width: number;
+}
+export interface PopupProps {
+    instanceClass: string;
+    visible: boolean;
+    rect: PopupRect;
+    header: React.ReactNode;
+    candidates: ExprCandidate[];
+    highlight: number;
+    virtualizeThreshold: number;
+    onSelect: (candidate: ExprCandidate) => void;
+    onHighlightChange: (index: number) => void;
+}
+export declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<HTMLDivElement>>;

package/es/ExpressionInput/Popup.js

@@ -0,0 +1,93 @@
+import { j as t } from "../_virtual/jsx-runtime.js";
+import * as p from "react";
+import { Lock as S } from "../node_modules/@para-ui/icons/Lock/index.js";
+import { $prefixCls as o } from "../GlobalContext/constant.js";
+const i = 30, d = 240, m = 4, b = p.forwardRef((v, g) => {
+  const {
+    instanceClass: T,
+    visible: $,
+    rect: a,
+    header: j,
+    candidates: s,
+    highlight: h,
+    virtualizeThreshold: w,
+    onSelect: N,
+    onHighlightChange: E
+  } = v, [H, x] = p.useState(0), c = p.useRef(null);
+  if (p.useEffect(() => {
+    x(0), c.current && (c.current.scrollTop = 0);
+  }, [s]), p.useEffect(() => {
+    const e = c.current;
+    if (!e)
+      return;
+    const n = h * i, r = e.scrollTop, f = r + e.clientHeight;
+    n < r ? e.scrollTop = n : n + i > f && (e.scrollTop = n + i - e.clientHeight);
+  }, [h]), !$ || s.length === 0)
+    return null;
+  const l = s.length > w, u = l ? Math.max(0, Math.floor(H / i) - m) : 0, M = l ? Math.ceil(d / i) + m * 2 : s.length, R = l ? Math.min(s.length, u + M) : s.length, y = s.slice(u, R), C = u * i;
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      ref: g,
+      className: `${o}-expression-input-popup ${T}`,
+      style: { position: "fixed", top: a.top, left: a.left, width: a.width },
+      children: [
+        /* @__PURE__ */ t.jsx("div", { className: `${o}-expression-input-popup-header`, children: j }),
+        /* @__PURE__ */ t.jsx(
+          "div",
+          {
+            ref: c,
+            className: `${o}-expression-input-popup-list`,
+            style: { maxHeight: d, overflowY: "auto" },
+            onScroll: (e) => {
+              l && x(e.currentTarget.scrollTop);
+            },
+            children: /* @__PURE__ */ t.jsx("div", { style: { height: l ? s.length * i : void 0, position: "relative" }, children: /* @__PURE__ */ t.jsx(
+              "div",
+              {
+                style: {
+                  position: l ? "absolute" : void 0,
+                  top: l ? C : void 0,
+                  left: 0,
+                  right: 0
+                },
+                children: y.map((e, n) => {
+                  const r = u + n, f = r === h;
+                  return /* @__PURE__ */ t.jsxs(
+                    "div",
+                    {
+                      "data-testid": `expr-candidate-row-${e.value}`,
+                      className: `${o}-expression-input-popup-item${f ? ` ${o}-expression-input-popup-item-active` : ""}`,
+                      style: { height: i },
+                      onMouseEnter: () => E(r),
+                      onMouseDown: (I) => {
+                        I.preventDefault(), N(e);
+                      },
+                      children: [
+                        /* @__PURE__ */ t.jsx("span", { className: `${o}-expression-input-popup-item-value`, children: e.label ?? e.value }),
+                        e.desc && /* @__PURE__ */ t.jsx("span", { className: `${o}-expression-input-popup-item-desc`, children: e.desc }),
+                        e.sensitive && /* @__PURE__ */ t.jsx(
+                          S,
+                          {
+                            "data-testid": `expr-candidate-lock-${e.value}`,
+                            className: `${o}-expression-input-popup-item-lock`
+                          }
+                        )
+                      ]
+                    },
+                    e.value
+                  );
+                })
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+});
+b.displayName = "Popup";
+export {
+  b as Popup
+};
+//# sourceMappingURL=Popup.js.map

package/es/ExpressionInput/component.json

@@ -0,0 +1,79 @@
+{
+  "name": "ExpressionInput",
+  "category": "数据录入",
+  "description": "单行表达式变量自动补全输入框,默认要求 {{ }} 包裹触发,候选数据完全由业务方通过 resolveCandidates 注入。",
+  "semantic": {
+    "intent": ["在文本中输入引用变量的表达式", "按命名空间层级下钻选择变量"],
+    "useCases": ["脚本/配置里引用运行时变量", "低代码画布属性面板里的表达式绑定"],
+    "riskLevel": "low"
+  },
+  "variants": {
+    "braces": { "meaning": "默认触发模式,要求光标位于 {{ }} 区间内才弹出候选" },
+    "bare": { "meaning": "不要求大括号包裹,任意位置匹配 triggerPrefix 即弹出候选" }
+  },
+  "states": ["default", "focus", "disabled", "readOnly", "popup-open"],
+  "idealProps": {
+    "value": { "type": "string", "description": "受控值", "required": false },
+    "onChange": { "type": "function", "description": "值变化回调", "signature": "(value: string) => void" },
+    "resolveCandidates": {
+      "type": "function",
+      "description": "按命名空间路径返回该层级的完整候选列表,组件内部按 parts 缓存",
+      "signature": "(parts: string[]) => ExprCandidate[]",
+      "required": true
+    },
+    "triggerMode": {
+      "type": "string",
+      "description": "触发匹配机制",
+      "values": ["braces", "bare"],
+      "default": "braces"
+    },
+    "triggerPrefix": { "type": "string", "description": "触发前缀符号", "default": "$" },
+    "virtualizeThreshold": { "type": "number", "description": "候选数超过该阈值启用虚拟滚动", "default": "50" },
+    "renderPopupHeader": {
+      "type": "function",
+      "description": "自定义浮层 header 文案",
+      "signature": "(ctx: ExprChainCtx, count: number) => React.ReactNode",
+      "required": false
+    },
+    "expressionTooltip": {
+      "type": "ReactNode",
+      "description": "表达式说明 tooltip 文案,不传则不展示;仅当 value 命中表达式格式(braces/bare)时 hover/focus 才弹出",
+      "required": false
+    }
+  },
+  "commonMisconceptions": [
+    "以为 resolveCandidates 每次按键都会被调用——实际只有下钻/回退到新的命名空间层级时才调用,同层级内逐字过滤是客户端完成的",
+    "以为默认触发不需要 {{ }} 包裹——默认 triggerMode 是 'braces',裸写 $.xxx 不会触发,需要显式传 triggerMode='bare' 才对齐 Ditto 原始行为",
+    "以为传入的 candidate.value 可以是任意字符串——实际必须是合法标识符字符([A-Za-z0-9_$]),否则插入后再次解析会被截断",
+    "以为 expressionTooltip 会随打字实时弹出/消失——实际是否命中只在 hover/focus 触发那一刻判定,光标停留期间继续输入使 value 从未命中变为命中不会自动弹出,需要重新 hover/focus",
+    "以为花括号着色和 expressionTooltip 用同一套判定标准——实际着色只看 {{ }} 是否配对闭合,不校验内容合法性,门槛比 expressionTooltip 低,{{$.}} 这类值会着色但不会弹出 tooltip,两者可能不一致,这是预期行为"
+  ],
+  "do": [
+    "为需要继续下钻子级的候选项设置 chain: true,让选中后自动追加 . 方便连续输入",
+    "为敏感字段设置 sensitive: true,组件会自动展示锁图标",
+    "在 Modal/Drawer 中使用时无需额外处理,组件内部已对接 usePopupContainer 自动寻找最近可滚动祖先容器"
+  ],
+  "dont": [
+    "不要在 resolveCandidates 内部做未做缓存的重量级计算并假设组件会防抖——组件只在 parts 变化时调用一次,但单次调用本身仍需业务方保证足够快",
+    "不要给多个实例传相同的 DOM id 或手动操作 document.body 上的浮层 — 组件已经用 UUID 做了实例隔离"
+  ],
+  "events": {
+    "onChange": {
+      "signature": "(value: string) => void",
+      "asyncSupported": false,
+      "examples": ["受控更新 value 状态"],
+      "commonMistakes": ["忘记把新 value 传回 props.value,导致组件表现为不可编辑"]
+    }
+  },
+  "typescriptPitfalls": [
+    {
+      "issue": "resolveCandidates 类型签名从 ChainCtx 变成了 parts: string[]",
+      "wrong": "resolveCandidates={(ctx) => ctx.partial ? [] : rootCandidates}",
+      "right": "resolveCandidates={(parts) => parts.length === 0 ? rootCandidates : []}"
+    }
+  ],
+  "mapping": {
+    "realComponent": "ExpressionInput",
+    "adapter": "无,直接使用"
+  }
+}

package/es/ExpressionInput/detectChainAtCursor.d.ts

@@ -0,0 +1,17 @@
+/** partial 片段本身允许出现的字符(不含 .) */
+export declare const ID_TAIL: RegExp;
+export interface DetectChainOptions {
+    triggerPrefix: string;
+    triggerMode: 'braces' | 'bare';
+}
+export interface ChainResult {
+    /** 链路在原文本中的起始下标(含前缀符号) */
+    startIdx: number;
+    /** 链路在原文本中的结束下标(即光标位置) */
+    endIdx: number;
+    /** 已确定的上级片段 */
+    parts: string[];
+    /** 正在输入的片段 */
+    partial: string;
+}
+export declare function detectChainAtCursor(text: string, cursor: number, options: DetectChainOptions): ChainResult | null;

package/es/ExpressionInput/detectChainAtCursor.js

@@ -0,0 +1,31 @@
+const x = /[A-Za-z0-9_$]/;
+function g(t) {
+  const e = t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(`[A-Za-z0-9_.${e}]`);
+}
+function h(t, e) {
+  const i = t.slice(0, e), r = i.lastIndexOf("{{");
+  if (r === -1 || i.lastIndexOf("}}") > r)
+    return !1;
+  const o = t.slice(e), n = o.indexOf("}}"), s = o.indexOf("{{");
+  return n === -1 ? !0 : !(s !== -1 && s < n);
+}
+function I(t, e, i) {
+  const { triggerPrefix: r, triggerMode: c } = i;
+  if (c === "braces" && !h(t, e))
+    return null;
+  const o = g(r);
+  let n = e;
+  for (; n > 0 && o.test(t[n - 1]); )
+    n -= 1;
+  const s = t.slice(n, e), f = `${r}.`;
+  if (!s.startsWith(f))
+    return null;
+  const a = s.slice(f.length), u = a.length > 0 ? a.split(".") : [""], l = u.pop(), d = u;
+  return l.length > 0 && !l.split("").every((p) => x.test(p)) ? null : { startIdx: n, endIdx: e, parts: d, partial: l };
+}
+export {
+  x as ID_TAIL,
+  I as detectChainAtCursor
+};
+//# sourceMappingURL=detectChainAtCursor.js.map

package/es/ExpressionInput/filterCandidatesByPartial.d.ts

@@ -0,0 +1,2 @@
+import { ExprCandidate } from './interface';
+export declare function filterCandidatesByPartial(candidates: ExprCandidate[], partial: string): ExprCandidate[];

package/es/ExpressionInput/filterCandidatesByPartial.js

@@ -0,0 +1,15 @@
+function n(e, r) {
+  if (!r)
+    return e;
+  const t = r.toLowerCase();
+  return e.filter((o) => {
+    if (o.value.toLowerCase().startsWith(t))
+      return !0;
+    const l = o.label?.toLowerCase();
+    return !!l && l.includes(t);
+  });
+}
+export {
+  n as filterCandidatesByPartial
+};
+//# sourceMappingURL=filterCandidatesByPartial.js.map

package/es/ExpressionInput/highlightSegments.d.ts

@@ -0,0 +1,9 @@
+export interface HighlightSegment {
+    text: string;
+    highlight: boolean;
+}
+/**
+ * 按 {{ }} 配对闭合切分 value,不校验内容合法性,不处理嵌套。
+ * 用于表达式片段着色,判定门槛低于 isExpressionValue。
+ */
+export declare function highlightSegments(value: string): HighlightSegment[];

package/es/ExpressionInput/highlightSegments.js

@@ -0,0 +1,14 @@
+const n = /\{\{[^{}]*\}\}/g;
+function s(e) {
+  if (!e)
+    return [];
+  const i = [];
+  let h = 0, t;
+  for (n.lastIndex = 0; (t = n.exec(e)) !== null; )
+    t.index > h && i.push({ text: e.slice(h, t.index), highlight: !1 }), i.push({ text: t[0], highlight: !0 }), h = t.index + t[0].length;
+  return h < e.length && i.push({ text: e.slice(h), highlight: !1 }), i;
+}
+export {
+  s as highlightSegments
+};
+//# sourceMappingURL=highlightSegments.js.map

package/es/ExpressionInput/index.css

@@ -0,0 +1 @@
+@charset "UTF-8";.paraui-v4-expression-input{display:inline-block;width:100%}.paraui-v4-expression-input input{position:relative;z-index:1;color:transparent!important;caret-color:#1d2126!important}.paraui-v4-expression-input-overlay{position:absolute;inset:0;z-index:0;overflow:hidden;color:#1d2126;white-space:pre;pointer-events:none}.paraui-v4-expression-input-overlay-highlight{color:#2e65e6}.paraui-v4-expression-input-popup{z-index:1500;min-width:280px;overflow:hidden;background:#fff;border:1px solid rgb(212,218,227);border-radius:4px;box-shadow:0 2px 8px #d4dae366}.paraui-v4-expression-input-popup-header{padding:6px 12px;font-size:12px;color:#a1a8b3;border-bottom:1px solid rgb(234,236,241)}.paraui-v4-expression-input-popup-list{padding:4px 0}.paraui-v4-expression-input-popup-item{display:flex;align-items:center;padding:0 12px;font-size:14px;color:#1d2126;white-space:nowrap;cursor:pointer}.paraui-v4-expression-input-popup-item-active{color:#2e65e6;background:#f0f5ff}.paraui-v4-expression-input-popup-item-value{flex:0 0 auto;margin-right:8px}.paraui-v4-expression-input-popup-item-desc{flex:1 1 auto;overflow:hidden;font-size:12px;color:#a1a8b3;text-overflow:ellipsis}.paraui-v4-expression-input-popup-item-lock{flex:0 0 auto;margin-left:8px;font-size:16px;color:#a1a8b3}

package/es/ExpressionInput/index.d.ts

@@ -0,0 +1,5 @@
+import { ExpressionInputProps } from './interface';
+import * as React from 'react';
+declare const ExpressionInput: React.FunctionComponent<ExpressionInputProps>;
+export default ExpressionInput;
+export * from './interface';

package/es/ExpressionInput/index.js

@@ -0,0 +1,178 @@
+import { j as a } from "../_virtual/jsx-runtime.js";
+import './index.css';/* empty css           */
+import * as r from "react";
+import * as b from "react-dom";
+import { UUID as X } from "@snack-kit/lib";
+import { TextField as Z } from "../TextField/index.js";
+import { Tooltip as Q } from "../Tooltip/index.js";
+import Y from "../GlobalContext/usePopupContainer.js";
+import ee from "../GlobalContext/useFormatMessage.js";
+import { $prefixCls as T } from "../GlobalContext/constant.js";
+import { useExpressionInput as te } from "./useExpressionInput.js";
+import { Popup as re } from "./Popup.js";
+import { isExpressionValue as ne } from "./isExpressionValue.js";
+import { highlightSegments as oe } from "./highlightSegments.js";
+import ie from "./HighlightOverlay.js";
+import se from "./lang/index.js";
+const le = 50, ae = "$", Re = (j) => {
+  const {
+    value: o,
+    onChange: z,
+    resolveCandidates: D,
+    triggerMode: h = "braces",
+    triggerPrefix: d = ae,
+    virtualizeThreshold: F = le,
+    renderPopupHeader: v,
+    expressionTooltip: p,
+    disabled: E,
+    readOnly: I,
+    className: x,
+    ...y
+  } = j, H = ee("ExpressionInput", se), [f] = r.useState(() => `${T}-expression-input-${X()}`), n = r.useRef(null), S = r.useRef(null), O = r.useRef({ getRootDomNode: () => n.current }), P = Y(O), [$, M] = r.useState({ top: 0, left: 0, width: 0 }), l = r.useRef(null), [w, q] = r.useState(null), [U, W] = r.useState({}), _ = r.useMemo(() => oe(o ?? ""), [o]), {
+    open: i,
+    ctx: c,
+    candidates: g,
+    highlight: A,
+    setHighlight: B,
+    handleValueChange: K,
+    handleKeyDown: N,
+    handleSelect: V,
+    close: R,
+    pendingCursorRef: m
+  } = te({
+    value: o ?? "",
+    onChange: z,
+    resolveCandidates: D,
+    triggerMode: h,
+    triggerPrefix: d,
+    disabled: E,
+    readOnly: I
+  }), s = r.useCallback(() => {
+    const e = n.current?.querySelector("input, textarea");
+    if (!e)
+      return;
+    const t = e.getBoundingClientRect();
+    M({ top: t.bottom + 4, left: t.left, width: Math.max(t.width, 280) });
+  }, []), u = r.useCallback(() => {
+    const e = n.current?.querySelector("input, textarea");
+    if (!e)
+      return;
+    q(e.parentElement);
+    const t = window.getComputedStyle(e);
+    W({
+      paddingTop: t.paddingTop,
+      paddingRight: t.paddingRight,
+      paddingBottom: t.paddingBottom,
+      paddingLeft: t.paddingLeft,
+      fontFamily: t.fontFamily,
+      fontSize: t.fontSize,
+      fontWeight: t.fontWeight,
+      lineHeight: t.lineHeight,
+      letterSpacing: t.letterSpacing,
+      boxSizing: t.boxSizing,
+      borderWidth: t.borderWidth,
+      borderStyle: t.borderStyle,
+      borderColor: "transparent"
+    });
+  }, []);
+  r.useLayoutEffect(() => (u(), window.addEventListener("resize", u), () => window.removeEventListener("resize", u)), [u]), r.useEffect(() => {
+    const e = n.current?.querySelector("input, textarea");
+    if (!e)
+      return;
+    const t = () => {
+      l.current && (l.current.scrollLeft = e.scrollLeft);
+    };
+    return e.addEventListener("scroll", t), () => e.removeEventListener("scroll", t);
+  }, []), r.useEffect(() => {
+    const e = n.current?.querySelector("input, textarea");
+    e && l.current && (l.current.scrollLeft = e.scrollLeft);
+  }, [o]), r.useEffect(() => {
+    const e = m.current;
+    if (e === null)
+      return;
+    const t = n.current?.querySelector("input, textarea");
+    t && (t.focus(), t.setSelectionRange(e, e)), m.current = null;
+  }, [o, m]), r.useEffect(() => {
+    if (i)
+      return s(), window.addEventListener("scroll", s, !0), window.addEventListener("resize", s), () => {
+        window.removeEventListener("scroll", s, !0), window.removeEventListener("resize", s);
+      };
+  }, [i, s]), r.useEffect(() => {
+    if (!i)
+      return;
+    const e = (t) => {
+      const C = t.target;
+      n.current?.contains(C) || S.current?.contains(C) || R();
+    };
+    return document.addEventListener("mousedown", e, !0), () => document.removeEventListener("mousedown", e, !0);
+  }, [i, R, f]);
+  const k = (e) => {
+    const t = e.target.selectionStart ?? e.target.value.length;
+    K(e.target.value, t);
+  }, G = c ? v ? v(c, g.length) : H(
+    { id: "header" },
+    { path: c.parts.length ? c.parts.join(".") : d, count: g.length }
+  ) : null, J = !!p && ne(o ?? "", d, h), L = /* @__PURE__ */ a.jsx(
+    Z,
+    {
+      ...y,
+      value: o,
+      disabled: E,
+      onChange: k,
+      onKeydown: (e) => {
+        N(e), y.onKeydown?.(e);
+      }
+    }
+  );
+  return /* @__PURE__ */ a.jsxs(
+    "div",
+    {
+      ref: n,
+      className: `${T}-expression-input ${f}${x ? ` ${x}` : ""}`,
+      children: [
+        p ? /* @__PURE__ */ a.jsx(
+          Q,
+          {
+            title: p,
+            trigger: ["hover", "focus"],
+            ...J ? {} : { visible: !1 },
+            children: L
+          }
+        ) : L,
+        w && b.createPortal(
+          /* @__PURE__ */ a.jsx(
+            ie,
+            {
+              ref: l,
+              segments: _,
+              style: U
+            }
+          ),
+          w
+        ),
+        i && n.current && b.createPortal(
+          /* @__PURE__ */ a.jsx(
+            re,
+            {
+              ref: S,
+              instanceClass: f,
+              visible: i,
+              rect: $,
+              header: G,
+              candidates: g,
+              highlight: A,
+              virtualizeThreshold: F,
+              onSelect: V,
+              onHighlightChange: B
+            }
+          ),
+          P(n.current)
+        )
+      ]
+    }
+  );
+};
+export {
+  Re as default
+};
+//# sourceMappingURL=index.js.map

package/es/ExpressionInput/interface.d.ts

@@ -0,0 +1,52 @@
+import { TextFieldProps } from '../TextField';
+import * as React from 'react';
+export interface ExprCandidate {
+    /** 插入表达式时使用的实际值 */
+    value: string;
+    /** 展示用名称,不传则显示 value */
+    label?: string;
+    /** 右侧描述文案 */
+    desc?: string;
+    /** 选中后是否自动追加 `.` 以便继续下钻子级 */
+    chain?: boolean;
+    /** 是否为敏感字段,展示锁图标 */
+    sensitive?: boolean;
+}
+export interface ExprChainCtx {
+    /** 当前光标所在链路中,已确定的上级片段(不含正在输入的部分) */
+    parts: string[];
+    /** 当前正在输入、尚未确定的片段 */
+    partial: string;
+}
+export interface ExpressionInputProps extends Omit<TextFieldProps, 'value' | 'onChange'> {
+    value?: string;
+    onChange?: (value: string) => void;
+    /**
+     * 只读态,输入触发前缀时不弹出候选浮层。
+     * 注:仓库现有 TextField 无 readOnly 能力,该态仅影响候选弹出逻辑,不改变输入框本身的可编辑外观。
+     */
+    readOnly?: boolean;
+    /**
+     * 按当前命名空间路径(不含正在输入的 partial)返回该层级的完整候选列表。
+     * 仅在 parts 变化(下钻/回退层级)时调用,组件内部按 parts 缓存结果;
+     * 同层级内继续输入 partial 只做客户端过滤,不会重复调用。
+     */
+    resolveCandidates: (parts: string[]) => ExprCandidate[];
+    /**
+     * 触发匹配机制,默认 'braces':仅当光标位于 `{{ }}` 区间内且内容匹配
+     * `{prefix}.xxx` 才弹窗。'bare':不要求大括号包裹,对齐 Ditto 原始行为。
+     */
+    triggerMode?: 'braces' | 'bare';
+    /** 触发表达式补全的前缀符号,默认 '$' */
+    triggerPrefix?: string;
+    /** 候选数量超过该阈值时启用虚拟滚动,默认 50 */
+    virtualizeThreshold?: number;
+    /** 自定义浮层 header 文案(面包屑 + 数量 + 快捷键提示),不传则使用默认 i18n 文案 */
+    renderPopupHeader?: (ctx: ExprChainCtx, count: number) => React.ReactNode;
+    /**
+     * 表达式说明 tooltip 文案,不传则不展示;仅当 value 命中表达式格式(braces/bare)时,hover/focus 输入框才会真正弹出。
+     * 注:是否命中只在触发 hover/focus 那一刻判定,若光标停留期间继续输入使 value 从未命中变为命中,
+     * 不会自动弹出,需要重新 hover/focus 才会展示——这是已知的边界行为,非 bug。
+     */
+    expressionTooltip?: React.ReactNode;
+}