@hsu-react/ui 2.5.3 → 2.5.4

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

@@ -21,6 +21,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import styles from "../index.module.scss";
 import * as echarts from "echarts";
 import { defaultBubbleColorList, drawCircles } from "../_utils/bubble";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 // Extended data item type containing all properties the chart needs
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -276,7 +277,10 @@ var Bubble = function Bubble(props) {
       chartInstanceRef.current.setOption(chartOption, true);
     }
   }, [chartOption, data]);
+  var onChartRef = useLatestRef(onChart);
 
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   useEffect(function () {
     if (!chartRef.current) return;
@@ -286,10 +290,11 @@ var Bubble = function Bubble(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);
     }
 
     // Resize first so echarts picks up the correct container size, then apply the option
@@ -313,7 +318,7 @@ var Bubble = function Bubble(props) {
         (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.off("click", onClick);
       }
     };
-  }, [chartOption, containerSize.width, containerSize.height, handleResize, onChart, onClick]);
+  }, [chartOption, containerSize.width, containerSize.height, handleResize, onChartRef, onClick]);
 
   // Dispose the chart instance when the component unmounts
   useEffect(function () {

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

@@ -11,6 +11,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 Common = function Common(props) {
   var className = props.className,
@@ -38,9 +39,13 @@ var Common = function Common(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);
 
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   useEffect(function () {
+    var _onChartRef$current;
     if (!chartRef.current || !containerReady) return;
 
     // Initialize or reuse an existing instance
@@ -54,7 +59,7 @@ var Common = function Common(props) {
     chart.setOption(chartOption, true);
 
     // Chart-ready callback (can be used for legend auto-scroll, etc.)
-    onChart === null || onChart === void 0 || onChart(chart);
+    (_onChartRef$current = onChartRef.current) === null || _onChartRef$current === void 0 || _onChartRef$current.call(onChartRef, chart);
 
     // Add resize listener
     window.addEventListener("resize", handleResize);
@@ -69,7 +74,7 @@ var Common = function Common(props) {
     return function () {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, onChart, containerReady]);
+  }, [chartOption, handleResize, onChartRef, containerReady]);
 
   // Clean up resources on component unmount
   useEffect(function () {

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

@@ -20,6 +20,7 @@ import * as echarts from "echarts";
 import { createDefaultHeatmapXAxis, createDefaultHeatmapYAxis } from "../_utils/heatmap";
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Heatmap = function Heatmap(props) {
   var className = props.className,
@@ -192,7 +193,10 @@ var Heatmap = function Heatmap(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);
 
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   useEffect(function () {
     if (!chartRef.current || !containerReady) return;
@@ -200,10 +204,11 @@ var Heatmap = function Heatmap(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
@@ -232,7 +237,7 @@ var Heatmap = function Heatmap(props) {
         (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.off("click", onClick);
       }
     };
-  }, [chartOption, handleResize, onChart, onClick, containerReady]);
+  }, [chartOption, handleResize, onChartRef, onClick, containerReady]);
 
   // Clean up resources when the component unmounts
   useEffect(function () {

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

@@ -8,6 +8,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useMouseOverHandler, useGlobalOutHandler } from "./_hooks";
 import { getPie3DOption } from "./_utils/option";
 import styles from "../../index.module.scss";
+import { useLatestRef } from "../../../../hooks/useLatestRef";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChartPie3D = function ChartPie3D(props) {
   var className = props.className,
@@ -89,13 +90,18 @@ var ChartPie3D = function ChartPie3D(props) {
     yOffset: yOffset,
     autoRotate: autoRotate
   });
+  var onChartRef = useLatestRef(onChart);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   useEffect(function () {
     if (!chartRef.current || !containerReady) return;
     var chart = chartInstanceRef.current;
     if (!chart) {
+      var _onChartRef$current;
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
-      onChart === null || onChart === void 0 || onChart(chart);
+      (_onChartRef$current = onChartRef.current) === null || _onChartRef$current === void 0 || _onChartRef$current.call(onChartRef, chart);
     }
     chart.setOption(chartOption, true);
     optionRef.current = chartOption;
@@ -119,7 +125,7 @@ var ChartPie3D = function ChartPie3D(props) {
         }
       }
     };
-  }, [chartOption, handleResize, handleMouseOver, handleGlobalOut, onChart, onClick, containerReady]);
+  }, [chartOption, handleResize, handleMouseOver, handleGlobalOut, onChartRef, onClick, containerReady]);
   useEffect(function () {
     return function () {
       if (resizeObserverRef.current) {

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,10 @@ 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);
 
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   useEffect(function () {
     if (!chartRef.current || !containerReady) return;
@@ -215,10 +219,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
@@ -268,7 +273,7 @@ var ChartPie = function 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
   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));
 };