@hsu-react/ui 2.5.3 → 2.5.5

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

@@ -19,6 +19,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { autoScrollLegend } from "../chartUtils";
 import styles from "../index.module.scss";
 import ChartPie3D from "./Pie3D";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChartPie = function ChartPie(props) {
   var className = props.className,
@@ -207,7 +208,16 @@ var ChartPie = function ChartPie(props) {
     if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
     (_chartInstanceRef$cur = chartInstanceRef.current) === null || _chartInstanceRef$cur === void 0 || _chartInstanceRef$cur.resize();
   }, []);
+  var onChartRef = useLatestRef(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  var onClickRef = useLatestRef(onClick);
+  var hasOnClick = !!onClick;
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   useEffect(function () {
     if (!chartRef.current || !containerReady) return;
@@ -215,10 +225,11 @@ var ChartPie = function ChartPie(props) {
     // Initialize or reuse the existing instance
     var chart = chartInstanceRef.current;
     if (!chart) {
+      var _onChartRef$current;
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
       // Call the onChart callback on first initialization
-      onChart === null || onChart === void 0 || onChart(chart);
+      (_onChartRef$current = onChartRef.current) === null || _onChartRef$current === void 0 || _onChartRef$current.call(onChartRef, chart);
     }
 
     // Apply the option
@@ -234,9 +245,13 @@ var ChartPie = function ChartPie(props) {
     }
 
     // Add click event
-    if (onClick) {
+    var handleClick = function handleClick(event) {
+      var _onClickRef$current;
+      (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 || _onClickRef$current.call(onClickRef, event);
+    };
+    if (hasOnClick) {
       var _chartInstanceRef$cur2;
-      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", onClick);
+      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", handleClick);
     }
 
     // Legend auto-scroll
@@ -257,9 +272,9 @@ var ChartPie = function ChartPie(props) {
     // Cleanup function
     return function () {
       window.removeEventListener("resize", handleResize);
-      if (onClick) {
+      if (hasOnClick) {
         var _chartInstanceRef$cur3;
-        (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.off("click", onClick);
+        (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.off("click", handleClick);
       }
 
       // Clean up legend scrolling
@@ -268,7 +283,7 @@ var ChartPie = function ChartPie(props) {
         legendScrollRef.current = null;
       }
     };
-  }, [chartOption, handleResize, onChart, onClick, enableLegendAutoScroll, seriesData, legendVisibleCount, legendScrollInterval, containerReady]);
+  }, [chartOption, handleResize, onChartRef, onClickRef, hasOnClick, enableLegendAutoScroll, seriesData, legendVisibleCount, legendScrollInterval, containerReady]);
 
   // Clean up resources when the component unmounts
   useEffect(function () {

package/es/components/Chart/Sankey/index.js

@@ -14,6 +14,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import useContainerReady from "../_hooks/useContainerReady";
 import styles from "../index.module.scss";
 import * as echarts from "echarts";
+import useLatestRef from "../../../hooks/useLatestRef";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Sankey = function Sankey(props) {
   var className = props.className,
@@ -103,6 +104,13 @@ var Sankey = function Sankey(props) {
     return option;
   }, [seriesData, seriesLinks, series]);
 
+  // getImage 只是「出图后把 dataURL 交出去」的出口，既不决定图怎么画，
+  // 也不该决定要不要重画。它进依赖数组会让 effect 跟着重跑 → setOption(notMerge)
+  // → 图重绘 → 再触发一次 finished → 再回调；消费方把图存进 state 就是死循环。
+  // 而且 finished 监听只在首次 init 时注册，闭包里锁死的是首帧的 getImage，
+  // 后续换了引用永远调不到 —— 依赖数组写了它也没用，是条死依赖。走 ref 两个问题一起解决。
+  var getImageRef = useLatestRef(getImage);
+
   // Callback handling chart resize
   var handleResize = useCallback(function () {
     var _chartInstanceRef$cur;
@@ -125,7 +133,8 @@ var Sankey = function Sankey(props) {
 
       // Attach the finished event listener on first initialization
       chart.on("finished", function () {
-        getImage === null || getImage === void 0 || getImage(chart.getDataURL({
+        var _getImageRef$current;
+        (_getImageRef$current = getImageRef.current) === null || _getImageRef$current === void 0 || _getImageRef$current.call(getImageRef, chart.getDataURL({
           type: "png",
           pixelRatio: 1,
           backgroundColor: "#fff"
@@ -149,7 +158,7 @@ var Sankey = function Sankey(props) {
     return function () {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, getImage, containerReady]);
+  }, [chartOption, handleResize, getImageRef, containerReady]);
 
   // Clean up resources on unmount
   useEffect(function () {

package/es/components/Chart/Tree/index.js

@@ -8,6 +8,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import useContainerReady from "../_hooks/useContainerReady";
 import styles from "../index.module.scss";
 import * as echarts from "echarts";
+import useLatestRef from "../../../hooks/useLatestRef";
 import { deepCopy } from "hsu-utils";
 import { handleTreeData } from "../_utils/tree";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -38,6 +39,13 @@ var Tree = function Tree(props) {
     return option;
   }, [seriesData, series]);
 
+  // getImage 只是「出图后把 dataURL 交出去」的出口，既不决定图怎么画，
+  // 也不该决定要不要重画。它进依赖数组会让 effect 跟着重跑 → setOption(notMerge)
+  // → 图重绘 → 再触发一次 finished → 再回调；消费方把图存进 state 就是死循环。
+  // 而且 finished 监听只在首次 init 时注册，闭包里锁死的是首帧的 getImage，
+  // 后续换了引用永远调不到 —— 依赖数组写了它也没用，是条死依赖。走 ref 两个问题一起解决。
+  var getImageRef = useLatestRef(getImage);
+
   // Callback handling chart resize
   var handleResize = useCallback(function () {
     var _chartInstanceRef$cur;
@@ -60,7 +68,8 @@ var Tree = function Tree(props) {
 
       // Attach the finished event listener on first initialization
       chart.on("finished", function () {
-        getImage === null || getImage === void 0 || getImage(chart.getDataURL({
+        var _getImageRef$current;
+        (_getImageRef$current = getImageRef.current) === null || _getImageRef$current === void 0 || _getImageRef$current.call(getImageRef, chart.getDataURL({
           type: "png",
           pixelRatio: 1,
           backgroundColor: "#fff"
@@ -84,7 +93,7 @@ var Tree = function Tree(props) {
     return function () {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, getImage, containerReady]);
+  }, [chartOption, handleResize, getImageRef, containerReady]);
 
   // Clean up resources on unmount
   useEffect(function () {

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

@@ -18,6 +18,7 @@ import { useFileList } from "./_hooks";
 import { FileList, AgentToggleButton, SendButton, StopButton, UploadButton } from "./_components";
 import classNames from "classnames";
 import Button from "../../Button";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -82,7 +83,10 @@ var ChatInput = function ChatInput(props) {
   var isControlled = externalAgentsState !== undefined;
   // Use external state or internal state
   var agentsState = isControlled ? externalAgentsState : internalAgentsState;
+  var onAgentsChangeRef = useLatestRef(onAgentsChange);
 
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // When the model switches, sync the agents state (only in uncontrolled mode)
   useEffect(function () {
     if (isControlled) return; // In controlled mode, state is managed externally
@@ -91,10 +95,11 @@ var ChatInput = function ChatInput(props) {
       return m.value === (modelConfig === null || modelConfig === void 0 ? void 0 : modelConfig.modelType);
     });
     if (currentModel !== null && currentModel !== void 0 && currentModel.agents && currentModel.agents.length > 0) {
+      var _onAgentsChangeRef$cu;
       setInternalAgentsState(currentModel.agents);
-      onAgentsChange === null || onAgentsChange === void 0 || onAgentsChange(currentModel.agents);
+      (_onAgentsChangeRef$cu = onAgentsChangeRef.current) === null || _onAgentsChangeRef$cu === void 0 || _onAgentsChangeRef$cu.call(onAgentsChangeRef, currentModel.agents);
     }
-  }, [modelConfig === null || modelConfig === void 0 ? void 0 : modelConfig.modelType, modelConfig === null || modelConfig === void 0 ? void 0 : modelConfig.modelList, onAgentsChange, isControlled]);
+  }, [modelConfig === null || modelConfig === void 0 ? void 0 : modelConfig.modelType, modelConfig === null || modelConfig === void 0 ? void 0 : modelConfig.modelList, onAgentsChangeRef, isControlled]);
 
   // Based on the currently selected model, filter the feature configs supported by that model
   var currentModel = modelConfig === null || modelConfig === void 0 ? void 0 : modelConfig.modelList.find(function (m) {

package/es/components/Icon/index.js

@@ -12,6 +12,7 @@ import * as AntdIcons from "@ant-design/icons";
 import React, { useCallback, useEffect, useRef } from "react";
 import classNames from "classnames";
 import styles from "./index.module.scss";
+import { useLatestRef } from "../../hooks/useLatestRef";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Check whether it is an AntD icon component name (e.g. "SettingOutlined") and return the corresponding component */
 var getAntdIcon = function getAntdIcon(icon) {
@@ -46,9 +47,14 @@ var Icon = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       forwardedRef.current = node;
     }
   }, [forwardedRef]);
+  var onRefRef = useLatestRef(onRef);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   useEffect(function () {
-    onRef === null || onRef === void 0 || onRef(ref);
-  }, [onRef, ref]);
+    var _onRefRef$current;
+    (_onRefRef$current = onRefRef.current) === null || _onRefRef$current === void 0 || _onRefRef$current.call(onRefRef, ref);
+  }, [onRefRef, ref]);
   var mergedStyle = _objectSpread({
     color: color,
     fontSize: typeof fontSize === "number" ? "".concat(fontSize, "px") : fontSize

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

@@ -18,7 +18,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { CloseCircleFilled } from "@ant-design/icons";
 import classNames from "classnames";
 import styles from "./index.module.scss";
-import { useDebounceEffect } from "ahooks";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -40,6 +40,7 @@ var InputNumber = function InputNumber(props) {
   // `getRef` keeps handing consumers an `HTMLInputElement` exactly as before.
   var ref = useRef(null);
   var wrapperRef = useRef(null);
+  var getRefRef = useLatestRef(getRef);
 
   // On initialization, prefer value, then fall back to defaultValue
   var initialValue = value !== undefined ? typeof value === "number" ? "".concat(value) : (_value$toString = value === null || value === void 0 ? void 0 : value.toString()) !== null && _value$toString !== void 0 ? _value$toString : "" : defaultValue !== undefined ? typeof defaultValue === "number" ? "".concat(defaultValue) : (_defaultValue$toStrin = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()) !== null && _defaultValue$toStrin !== void 0 ? _defaultValue$toStrin : "" : "";
@@ -47,19 +48,21 @@ var InputNumber = function InputNumber(props) {
     _useState2 = _slicedToArray(_useState, 2),
     _value = _useState2[0],
     setValue = _useState2[1];
-  var _useState3 = useState(initialValue),
-    _useState4 = _slicedToArray(_useState3, 2),
-    lastValue = _useState4[0],
-    setLastValue = _useState4[1];
   var prevValueRef = useRef(undefined);
-  useDebounceEffect(function () {
-    if (_value !== lastValue) {
-      setLastValue(_value);
-      onChange === null || onChange === void 0 || onChange(_value);
-    }
-  }, [_value, lastValue, onChange], {
-    wait: 10
-  });
+  // 最近一次通知出去的文本，代替原来那个用 state 记账的写法
+  var notifiedRef = useRef(initialValue);
+
+  /**
+   * `onChange` 是「用户改了输入」这个**事件**的通知，不是从 state 推导出来的结果，
+   * 所以在事件处理里发，不在 effect 里发。详见 `TextArea/index.tsx` 里那段说明——
+   * 旧写法（依赖数组里放 `onChange`、体内又调它、用 state 记「通知过没有」）
+   * 会让传内联箭头的消费方死循环。
+   */
+  var notify = function notify(next) {
+    if (next === notifiedRef.current) return;
+    notifiedRef.current = next;
+    onChange === null || onChange === void 0 || onChange(next);
+  };
   useEffect(function () {
     // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
@@ -76,30 +79,33 @@ var InputNumber = function InputNumber(props) {
       // 表示的是同一个数，此时以用户正在敲的那份文本为准。
       var sameNumber = value !== undefined && value !== null && _value !== "" && Number(value) === Number(_value);
       if (sameNumber) {
-        // 只同步「已提交值」，不动正在编辑的文本
-        setLastValue(_value);
+        // 只同步「已通知过的值」，不动正在编辑的文本
+        notifiedRef.current = _value;
       } else if (value !== undefined && value !== null) {
         var newValue = typeof value === "number" ? "".concat(value) : value === null || value === void 0 ? void 0 : 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` 进依赖数组同样会被内联箭头带着每次渲染重跑
   useEffect(function () {
-    getRef === null || getRef === void 0 || getRef(ref.current);
-  }, [getRef]);
+    var _getRefRef$current;
+    (_getRefRef$current = getRefRef.current) === null || _getRefRef$current === void 0 || _getRefRef$current.call(getRefRef, ref.current);
+  }, [getRefRef]);
   var handleClear = function handleClear(e) {
     e.stopPropagation();
     setValue("");
-    setLastValue("");
-    onChange === null || onChange === void 0 || onChange("");
+    notify("");
   };
   var showClear = allowClear && _value !== "" && _value !== undefined && !disabled;
   var input = /*#__PURE__*/_jsx(AntdInputNumber, _objectSpread(_objectSpread({
@@ -108,6 +114,7 @@ var InputNumber = function InputNumber(props) {
     onChange: function onChange(e) {
       var newValue = e === null || e === undefined ? "" : (typeof e === "number" ? e : e || "").toString();
       setValue(newValue);
+      notify(newValue);
     },
     className: classNames(styles.antdInput, className),
     controls: false,

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

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

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

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