@hsu-react/ui 2.5.2 → 2.5.4

package/lib/components/Chart/Common/index.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _useContainerReady = _interopRequireDefault(require("../_hooks/useContainerReady"));
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var echarts = _interopRequireWildcard(require("echarts"));
+var _useLatestRef = require("../../../hooks/useLatestRef");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -41,7 +42,10 @@ const Common = props => {
     if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
     chartInstanceRef.current?.resize();
   }, []);
+  const onChartRef = (0, _useLatestRef.useLatestRef)(onChart);
 
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   (0, _react.useEffect)(() => {
     if (!chartRef.current || !containerReady) return;
@@ -57,7 +61,7 @@ const Common = props => {
     chart.setOption(chartOption, true);
 
     // Chart-ready callback (can be used for legend auto-scroll, etc.)
-    onChart?.(chart);
+    onChartRef.current?.(chart);
 
     // Add resize listener
     window.addEventListener("resize", handleResize);
@@ -72,7 +76,7 @@ const Common = props => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, onChart, containerReady]);
+  }, [chartOption, handleResize, onChartRef, containerReady]);
 
   // Clean up resources on component unmount
   (0, _react.useEffect)(() => {

package/lib/components/Chart/Heatmap/index.js

@@ -11,6 +11,7 @@ var echarts = _interopRequireWildcard(require("echarts"));
 var _heatmap = require("../_utils/heatmap");
 var _chartTheme = require("../_utils/chartTheme");
 var _useIsDark = _interopRequireDefault(require("../../../hooks/useIsDark"));
+var _useLatestRef = require("../../../hooks/useLatestRef");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -191,7 +192,10 @@ const Heatmap = props => {
     if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
     chartInstanceRef.current?.resize();
   }, []);
+  const onChartRef = (0, _useLatestRef.useLatestRef)(onChart);
 
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   (0, _react.useEffect)(() => {
     if (!chartRef.current || !containerReady) return;
@@ -202,7 +206,7 @@ const Heatmap = props => {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
       // Call the onChart callback on first initialization
-      onChart?.(chart);
+      onChartRef.current?.(chart);
     }
 
     // Apply the option
@@ -229,7 +233,7 @@ const Heatmap = props => {
         chartInstanceRef.current?.off("click", onClick);
       }
     };
-  }, [chartOption, handleResize, onChart, onClick, containerReady]);
+  }, [chartOption, handleResize, onChartRef, onClick, containerReady]);
 
   // Clean up resources when the component unmounts
   (0, _react.useEffect)(() => {

package/lib/components/Chart/Pie/Pie3D/index.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("./_hooks");
 var _option = require("./_utils/option");
 var _indexModule = _interopRequireDefault(require("../../index.module.scss"));
+var _useLatestRef = require("../../../../hooks/useLatestRef");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -84,13 +85,17 @@ const ChartPie3D = props => {
     yOffset,
     autoRotate
   });
+  const onChartRef = (0, _useLatestRef.useLatestRef)(onChart);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   (0, _react.useEffect)(() => {
     if (!chartRef.current || !containerReady) return;
     let chart = chartInstanceRef.current;
     if (!chart) {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
-      onChart?.(chart);
+      onChartRef.current?.(chart);
     }
     chart.setOption(chartOption, true);
     optionRef.current = chartOption;
@@ -114,7 +119,7 @@ const ChartPie3D = props => {
         }
       }
     };
-  }, [chartOption, handleResize, handleMouseOver, handleGlobalOut, onChart, onClick, containerReady]);
+  }, [chartOption, handleResize, handleMouseOver, handleGlobalOut, onChartRef, onClick, containerReady]);
   (0, _react.useEffect)(() => {
     return () => {
       if (resizeObserverRef.current) {

package/lib/components/Chart/Pie/index.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _chartUtils = require("../chartUtils");
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var _Pie3D = _interopRequireDefault(require("./Pie3D"));
+var _useLatestRef = require("../../../hooks/useLatestRef");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -200,7 +201,10 @@ const ChartPie = props => {
     if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
     chartInstanceRef.current?.resize();
   }, []);
+  const onChartRef = (0, _useLatestRef.useLatestRef)(onChart);
 
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   (0, _react.useEffect)(() => {
     if (!chartRef.current || !containerReady) return;
@@ -211,7 +215,7 @@ const ChartPie = props => {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
       // Call the onChart callback on first initialization
-      onChart?.(chart);
+      onChartRef.current?.(chart);
     }
 
     // Apply the option
@@ -259,7 +263,7 @@ const ChartPie = props => {
         legendScrollRef.current = null;
       }
     };
-  }, [chartOption, handleResize, onChart, onClick, enableLegendAutoScroll, seriesData, legendVisibleCount, legendScrollInterval, containerReady]);
+  }, [chartOption, handleResize, onChartRef, onClick, enableLegendAutoScroll, seriesData, legendVisibleCount, legendScrollInterval, containerReady]);
 
   // Clean up resources when the component unmounts
   (0, _react.useEffect)(() => {

package/lib/components/Chat/ChatInput/index.js

@@ -12,6 +12,7 @@ var _hooks = require("./_hooks");
 var _components = require("./_components");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Button = _interopRequireDefault(require("../../Button"));
+var _useLatestRef = require("../../../hooks/useLatestRef");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -61,7 +62,10 @@ const ChatInput = props => {
   const isControlled = externalAgentsState !== undefined;
   // Use external state or internal state
   const agentsState = isControlled ? externalAgentsState : internalAgentsState;
+  const onAgentsChangeRef = (0, _useLatestRef.useLatestRef)(onAgentsChange);
 
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // When the model switches, sync the agents state (only in uncontrolled mode)
   (0, _react.useEffect)(() => {
     if (isControlled) return; // In controlled mode, state is managed externally
@@ -69,9 +73,9 @@ const ChatInput = props => {
     const currentModel = modelConfig?.modelList.find(m => m.value === modelConfig?.modelType);
     if (currentModel?.agents && currentModel.agents.length > 0) {
       setInternalAgentsState(currentModel.agents);
-      onAgentsChange?.(currentModel.agents);
+      onAgentsChangeRef.current?.(currentModel.agents);
     }
-  }, [modelConfig?.modelType, modelConfig?.modelList, onAgentsChange, isControlled]);
+  }, [modelConfig?.modelType, modelConfig?.modelList, onAgentsChangeRef, isControlled]);
 
   // Based on the currently selected model, filter the feature configs supported by that model
   const currentModel = modelConfig?.modelList.find(m => m.value === modelConfig?.modelType);

package/lib/components/Icon/index.js

@@ -9,6 +9,7 @@ var AntdIcons = _interopRequireWildcard(require("@ant-design/icons"));
 var _react2 = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+var _useLatestRef = require("../../hooks/useLatestRef");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -48,9 +49,13 @@ const Icon = /*#__PURE__*/_react2.default.forwardRef((props, forwardedRef) => {
       forwardedRef.current = node;
     }
   }, [forwardedRef]);
+  const onRefRef = (0, _useLatestRef.useLatestRef)(onRef);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   (0, _react2.useEffect)(() => {
-    onRef?.(ref);
-  }, [onRef, ref]);
+    onRefRef.current?.(ref);
+  }, [onRefRef, ref]);
   const mergedStyle = {
     color,
     fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,

package/lib/components/Input/Number/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _icons = require("@ant-design/icons");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
-var _ahooks = require("ahooks");
+var _useLatestRef = require("../../../hooks/useLatestRef");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -32,20 +32,26 @@ const InputNumber = props => {
   // `getRef` keeps handing consumers an `HTMLInputElement` exactly as before.
   const ref = (0, _react.useRef)(null);
   const wrapperRef = (0, _react.useRef)(null);
+  const getRefRef = (0, _useLatestRef.useLatestRef)(getRef);
 
   // On initialization, prefer value, then fall back to defaultValue
   const initialValue = value !== undefined ? typeof value === "number" ? `${value}` : value?.toString() ?? "" : defaultValue !== undefined ? typeof defaultValue === "number" ? `${defaultValue}` : defaultValue?.toString() ?? "" : "";
   const [_value, setValue] = (0, _react.useState)(initialValue);
-  const [lastValue, setLastValue] = (0, _react.useState)(initialValue);
   const prevValueRef = (0, _react.useRef)(undefined);
-  (0, _ahooks.useDebounceEffect)(() => {
-    if (_value !== lastValue) {
-      setLastValue(_value);
-      onChange?.(_value);
-    }
-  }, [_value, lastValue, onChange], {
-    wait: 10
-  });
+  // 最近一次通知出去的文本，代替原来那个用 state 记账的写法
+  const notifiedRef = (0, _react.useRef)(initialValue);
+
+  /**
+   * `onChange` 是「用户改了输入」这个**事件**的通知，不是从 state 推导出来的结果，
+   * 所以在事件处理里发，不在 effect 里发。详见 `TextArea/index.tsx` 里那段说明——
+   * 旧写法（依赖数组里放 `onChange`、体内又调它、用 state 记「通知过没有」）
+   * 会让传内联箭头的消费方死循环。
+   */
+  const notify = next => {
+    if (next === notifiedRef.current) return;
+    notifiedRef.current = next;
+    onChange?.(next);
+  };
   (0, _react.useEffect)(() => {
     // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
@@ -62,30 +68,32 @@ const InputNumber = props => {
       // 表示的是同一个数，此时以用户正在敲的那份文本为准。
       const sameNumber = value !== undefined && value !== null && _value !== "" && Number(value) === Number(_value);
       if (sameNumber) {
-        // 只同步「已提交值」，不动正在编辑的文本
-        setLastValue(_value);
+        // 只同步「已通知过的值」，不动正在编辑的文本
+        notifiedRef.current = _value;
       } else if (value !== undefined && value !== null) {
         const newValue = typeof value === "number" ? `${value}` : value?.toString();
+        // 外部把值改了，之前通知过什么就不作数了，重新以外部值为准
+        notifiedRef.current = newValue;
         setValue(newValue);
-        setLastValue(newValue);
       } else {
         // Clear only on initialization or when explicitly set to undefined/null externally
+        notifiedRef.current = "";
         setValue("");
-        setLastValue("");
       }
     }
     // `_value` 是刻意不进依赖的：这个 effect 只该在**外部** value 变化时跑，
     // 把它加进来会让每次键入都重跑一遍，等于绕过上面那个 prevValueRef 判断
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
+
+  // 只在挂载时把 ref 交出去。`getRef` 进依赖数组同样会被内联箭头带着每次渲染重跑
   (0, _react.useEffect)(() => {
-    getRef?.(ref.current);
-  }, [getRef]);
+    getRefRef.current?.(ref.current);
+  }, [getRefRef]);
   const handleClear = e => {
     e.stopPropagation();
     setValue("");
-    setLastValue("");
-    onChange?.("");
+    notify("");
   };
   const showClear = allowClear && _value !== "" && _value !== undefined && !disabled;
   const input = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.InputNumber, {
@@ -94,6 +102,7 @@ const InputNumber = props => {
     onChange: e => {
       const newValue = e === null || e === undefined ? "" : (typeof e === "number" ? e : e || "").toString();
       setValue(newValue);
+      notify(newValue);
     },
     className: (0, _classnames.default)(_indexModule.default.antdInput, className),
     controls: false,

package/lib/components/Input/Password/index.js

@@ -8,6 +8,7 @@ var _Password = _interopRequireDefault(require("antd/es/input/Password"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+var _useLatestRef = require("../../../hooks/useLatestRef");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -21,51 +22,64 @@ const Password = props => {
     className,
     ...inputConfig
   } = props;
-  const [isComposing, setComposing] = (0, _react.useState)(false);
   const ref = (0, _react.useRef)(null);
+  const getRefRef = (0, _useLatestRef.useLatestRef)(getRef);
+  // 输入法组字期间不往外通知。放 ref 不放 state：它只决定「要不要发通知」，
+  // 不参与渲染，而且必须在同一次事件里立刻生效
+  const composingRef = (0, _react.useRef)(false);
 
   // On initialization, prefer value, then fall back to defaultValue
   const initialValue = value !== undefined ? value?.toString() ?? "" : defaultValue !== undefined ? defaultValue?.toString() ?? "" : "";
   const [_value, setValue] = (0, _react.useState)(initialValue);
-  const [lastValue, setLastValue] = (0, _react.useState)(initialValue);
   const prevValueRef = (0, _react.useRef)(undefined);
-  (0, _react.useEffect)(() => {
-    if (!isComposing && _value !== lastValue) {
-      const trimmedValue = _value.trim();
-      const finalValue = trimmedValue === "" ? "" : _value;
-      setLastValue(finalValue);
-      onChange?.(finalValue);
-    }
-  }, [_value, isComposing, lastValue, onChange]);
+  // 最近一次通知出去的原文。只用来去掉 compositionend 与 input 两个事件的重复通知
+  const notifiedRef = (0, _react.useRef)(initialValue);
+
+  /**
+   * `onChange` 是「用户改了输入」这个**事件**的通知，不是从 state 推导出来的结果，
+   * 所以在事件处理里发，不在 effect 里发。详见 `TextArea/index.tsx` 里那段说明——
+   * 旧写法（依赖数组里放 `onChange`、体内又调它、用 state 记「通知过没有」）
+   * 会让传内联箭头的消费方死循环。
+   */
+  const notify = next => {
+    if (next === notifiedRef.current) return;
+    notifiedRef.current = next;
+    // 全是空白等同于空
+    onChange?.(next.trim() === "" ? "" : next);
+  };
   (0, _react.useEffect)(() => {
     // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
-      if (value !== undefined) {
-        setValue(value?.toString());
-        setLastValue(value?.toString());
-      } else {
-        // Clear only on initialization or when explicitly set to undefined externally
-        setValue("");
-        setLastValue("");
-      }
+
+      // 外部把值改了，之前通知过什么就不作数了，重新以外部值为准
+      const next = value !== undefined ? value?.toString() ?? "" : "";
+      notifiedRef.current = next;
+      setValue(next);
     }
   }, [value]);
+
+  // 只在挂载时把 ref 交出去。`getRef` 进依赖数组同样会被内联箭头带着每次渲染重跑
   (0, _react.useEffect)(() => {
-    getRef?.(ref.current);
-  }, [getRef]);
+    getRefRef.current?.(ref.current);
+  }, [getRefRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Password.default, {
     className: (0, _classnames.default)(_indexModule.default.antdInput, className),
     ref: ref,
-    onCompositionStart: () => setComposing(true),
-    onCompositionEnd: () => {
-      setTimeout(() => {
-        setComposing(false);
-      }, 1);
+    onCompositionStart: () => {
+      composingRef.current = true;
+    },
+    onCompositionEnd: e => {
+      composingRef.current = false;
+      // 组完字的那一下自己发通知。浏览器之间 compositionend 与 input 的先后
+      // 不一致，`notify` 里按原文去重，两种顺序都只会发出一次
+      notify(e.currentTarget.value);
     },
     value: _value,
     onChange: e => {
-      setValue(e.target.value);
+      const next = e.target.value;
+      setValue(next);
+      if (!composingRef.current) notify(next);
     },
     ...inputConfig
   });

package/lib/components/Input/Search/index.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Search = _interopRequireDefault(require("antd/es/input/Search"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+var _useLatestRef = require("../../../hooks/useLatestRef");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -21,50 +22,65 @@ const Search = props => {
     className,
     ...inputConfig
   } = props;
-  const [isComposing, setComposing] = (0, _react.useState)(false);
   const ref = (0, _react.useRef)(null);
+  const getRefRef = (0, _useLatestRef.useLatestRef)(getRef);
+  // 输入法组字期间不往外通知。放 ref 不放 state：它只决定「要不要发通知」，
+  // 不参与渲染，而且必须在同一次事件里立刻生效
+  const composingRef = (0, _react.useRef)(false);
 
   // On initialization, prefer value, then fall back to defaultValue
   const initialValue = value !== undefined ? value?.toString() ?? "" : defaultValue !== undefined ? defaultValue?.toString() ?? "" : "";
   const [_value, setValue] = (0, _react.useState)(initialValue);
-  const [lastValue, setLastValue] = (0, _react.useState)(initialValue);
   const prevValueRef = (0, _react.useRef)(undefined);
-  (0, _react.useEffect)(() => {
-    if (!isComposing && _value !== lastValue) {
-      const trimmedValue = _value.trim();
-      const finalValue = trimmedValue === "" ? "" : _value;
-      setLastValue(finalValue);
-      onChange?.(finalValue);
-    }
-  }, [_value, isComposing, lastValue, onChange]);
+  // 最近一次通知出去的原文。只用来去掉 compositionend 与 input 两个事件的重复通知
+  const notifiedRef = (0, _react.useRef)(initialValue);
+
+  /**
+   * `onChange` 是「用户改了输入」这个**事件**的通知，不是从 state 推导出来的结果，
+   * 所以在事件处理里发，不在 effect 里发。详见 `TextArea/index.tsx` 里那段说明——
+   * 旧写法（依赖数组里放 `onChange`、体内又调它、用 state 记「通知过没有」）
+   * 会让传内联箭头的消费方死循环。
+   */
+  const notify = next => {
+    if (next === notifiedRef.current) return;
+    notifiedRef.current = next;
+    // 全是空白等同于空
+    onChange?.(next.trim() === "" ? "" : next);
+  };
   (0, _react.useEffect)(() => {
     // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
-      if (value !== undefined) {
-        setValue(value?.toString());
-        setLastValue(value?.toString());
-      } else {
-        // Clear only on initialization or when explicitly set to undefined externally
-        setValue("");
-        setLastValue("");
-      }
+
+      // 外部把值改了，之前通知过什么就不作数了，重新以外部值为准
+      const next = value !== undefined ? value?.toString() ?? "" : "";
+      notifiedRef.current = next;
+      setValue(next);
     }
   }, [value]);
+
+  // 只在挂载时把 ref 交出去。`getRef` 进依赖数组同样会被内联箭头带着每次渲染重跑
   (0, _react.useEffect)(() => {
-    getRef?.(ref.current);
-  }, [getRef]);
+    getRefRef.current?.(ref.current);
+  }, [getRefRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {
     ref: ref,
     className: (0, _classnames.default)(_indexModule.default.antdInput, className),
-    onCompositionStart: () => setComposing(true),
-    onCompositionEnd: () => {
-      setTimeout(() => {
-        setComposing(false);
-      }, 1);
+    onCompositionStart: () => {
+      composingRef.current = true;
+    },
+    onCompositionEnd: e => {
+      composingRef.current = false;
+      // 组完字的那一下自己发通知。浏览器之间 compositionend 与 input 的先后
+      // 不一致，`notify` 里按原文去重，两种顺序都只会发出一次
+      notify(e.currentTarget.value);
     },
     value: _value,
-    onChange: e => setValue(e.target.value),
+    onChange: e => {
+      const next = e.target.value;
+      setValue(next);
+      if (!composingRef.current) notify(next);
+    },
     ...inputConfig
   });
 };

package/lib/components/Input/TextArea/index.js

@@ -8,6 +8,7 @@ var _TextArea = _interopRequireDefault(require("antd/es/input/TextArea"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+var _useLatestRef = require("../../../hooks/useLatestRef");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -33,41 +34,63 @@ const TextArea = props => {
     style,
     ...inputConfig
   } = props;
-  const [isComposing, setComposing] = (0, _react.useState)(false);
   const ref = (0, _react.useRef)(null);
   const [focused, setFocused] = (0, _react.useState)(false);
 
   // On initialization, prefer value, then fall back to defaultValue
   const initialValue = value !== undefined ? value?.toString() ?? "" : defaultValue !== undefined ? defaultValue?.toString() ?? "" : "";
   const [_value, setValue] = (0, _react.useState)(initialValue);
-  const [lastValue, setLastValue] = (0, _react.useState)(initialValue);
   const [hasError, setHasError] = (0, _react.useState)(false);
   const prevValueRef = (0, _react.useRef)(undefined);
-  (0, _react.useEffect)(() => {
-    if (!isComposing && _value !== lastValue) {
-      const trimmedValue = _value.trim();
-      const finalValue = trimmedValue === "" ? "" : _value;
-      setLastValue(finalValue);
-      onChange?.(finalValue);
-    }
-  }, [isComposing, onChange, _value, lastValue]);
+  const getRefRef = (0, _useLatestRef.useLatestRef)(getRef);
+
+  // 输入法组字期间不往外通知。放 ref 不放 state：它只影响「要不要发通知」，
+  // 不参与渲染，而且必须在同一次事件里立刻生效
+  const composingRef = (0, _react.useRef)(false);
+  // 最近一次通知出去的原文。只用来去掉 compositionend 与 input 两个事件的重复通知
+  const notifiedRef = (0, _react.useRef)(initialValue);
+
+  /**
+   * `onChange` 是「用户改了输入」这个**事件**的通知，不是从 state 推导出来的结果，
+   * 所以它在事件处理里发，不在 effect 里发。
+   *
+   * 早先是一个 effect 在发：依赖数组里放着 `onChange`，effect 体内又调它，
+   * 还用一个 `lastValue` state 记「这个值通知过没有」。两处都是错的——
+   * 1. 消费方传内联箭头（`onChange={(v) => setX(v)}`，React 里最常见的写法）时
+   *    每次渲染都是新引用，effect 每次渲染都重跑；
+   * 2. 「通知过没有」的记账放在 React state 里就**不可靠**：父级用 MobX /
+   *    `useSyncExternalStore` 这类外部 store 回写 `value` 时，React 会以更高的
+   *    同步优先级重渲一次，effect 里排的那次 `setLastValue` 会被这一趟**跳过**，
+   *    于是 effect 读到过期的记账、判定「还没通知」，再发一次 → 父级再回写 →
+   *    死循环，React 抛 `Maximum update depth exceeded`，输入框被上层
+   *    ErrorBoundary 整块摘掉。
+   *
+   * 现在 `onChange` 的引用稳不稳定完全不影响正确性：永远调到最新的那个回调，
+   * 且只在真的有新文本时调一次。
+   */
+  const notify = next => {
+    if (next === notifiedRef.current) return;
+    notifiedRef.current = next;
+    // 全是空白等同于空：外部拿到的是 ""，但输入框里用户敲的空格照旧留着
+    onChange?.(next.trim() === "" ? "" : next);
+  };
   (0, _react.useEffect)(() => {
     // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
-      if (value !== undefined) {
-        setValue(value?.toString());
-        setLastValue(value?.toString());
-      } else {
-        // Clear only on initialization or when explicitly set to undefined externally
-        setValue("");
-        setLastValue("");
-      }
+
+      // 外部把值改了，之前通知过什么就不作数了，重新以外部值为准
+      const next = value !== undefined ? value?.toString() ?? "" : "";
+      notifiedRef.current = next;
+      setValue(next);
     }
   }, [value]);
+
+  // 只在挂载时把 ref 交出去。`getRef` 进依赖数组同样会被内联箭头带着每次渲染重跑，
+  // 消费方在里面 setState 就是一个死循环
   (0, _react.useEffect)(() => {
-    getRef?.(ref.current);
-  }, [getRef]);
+    getRefRef.current?.(ref.current);
+  }, [getRefRef]);
   (0, _react.useEffect)(() => {
     // Use a MutationObserver to watch for error state changes
     const checkError = () => {
@@ -106,18 +129,23 @@ const TextArea = props => {
     style: style,
     children: [prefix, /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.default, {
       ref: ref,
-      onCompositionStart: () => setComposing(true),
-      onCompositionEnd: () => {
-        setTimeout(() => {
-          setComposing(false);
-        }, 1);
+      onCompositionStart: () => {
+        composingRef.current = true;
+      },
+      onCompositionEnd: e => {
+        composingRef.current = false;
+        // 组完字的那一下自己发通知。浏览器之间 compositionend 与 input 的先后
+        // 不一致，`notify` 里按原文去重，两种顺序都只会发出一次
+        notify(e.currentTarget.value);
       },
       value: _value,
       autoSize: disabled && text ? autoSize || {
         minRows: 1
       } : autoSize,
       onChange: e => {
-        setValue(e.target.value);
+        const next = e.target.value;
+        setValue(next);
+        if (!composingRef.current) notify(next);
       },
       onFocus: e => {
         setFocused(true);