@hsu-react/ui 2.5.4 → 2.5.6

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

@@ -11,10 +11,13 @@ var _chartUtils = require("../chartUtils");
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var _Pie3D = _interopRequireDefault(require("./Pie3D"));
 var _useLatestRef = require("../../../hooks/useLatestRef");
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 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); }
 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; }
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_EXTEND_SERIES = [];
 const ChartPie = props => {
   const {
     className,
@@ -26,7 +29,7 @@ const ChartPie = props => {
     series,
     title,
     onChart,
-    extendSeries = [],
+    extendSeries = EMPTY_EXTEND_SERIES,
     onClick,
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
@@ -36,8 +39,12 @@ const ChartPie = props => {
     spanAngle = 180,
     center,
     radius,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why
@@ -203,6 +210,12 @@ const ChartPie = props => {
   }, []);
   const onChartRef = (0, _useLatestRef.useLatestRef)(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  const onClickRef = (0, _useLatestRef.useLatestRef)(onClick);
+  const hasOnClick = !!onClick;
+
   // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
   // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
@@ -231,8 +244,11 @@ const ChartPie = props => {
     }
 
     // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    const handleClick = event => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Legend auto-scroll
@@ -253,8 +269,8 @@ const ChartPie = props => {
     // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
-      if (onClick) {
-        chartInstanceRef.current?.off("click", onClick);
+      if (hasOnClick) {
+        chartInstanceRef.current?.off("click", handleClick);
       }
 
       // Clean up legend scrolling
@@ -263,7 +279,7 @@ const ChartPie = props => {
         legendScrollRef.current = null;
       }
     };
-  }, [chartOption, handleResize, onChartRef, onClick, enableLegendAutoScroll, seriesData, legendVisibleCount, legendScrollInterval, containerReady]);
+  }, [chartOption, handleResize, onChartRef, onClickRef, hasOnClick, enableLegendAutoScroll, seriesData, legendVisibleCount, legendScrollInterval, containerReady]);
 
   // Clean up resources when the component unmounts
   (0, _react.useEffect)(() => {

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

@@ -8,10 +8,13 @@ var echarts = _interopRequireWildcard(require("echarts"));
 var _useContainerReady = _interopRequireDefault(require("../_hooks/useContainerReady"));
 var _react = _interopRequireWildcard(require("react"));
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 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); }
 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; }
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const DEFAULT_COLOR = ["#00FFA3", "#00FFA3"];
 const Polar = props => {
   const {
     className,
@@ -26,9 +29,13 @@ const Polar = props => {
     title2Style,
     textStyle,
     seriesData,
-    color = ["#00FFA3", "#00FFA3"],
-    ...coreOption
+    color = DEFAULT_COLOR,
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

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

@@ -8,6 +8,7 @@ var echarts = _interopRequireWildcard(require("echarts"));
 var _useContainerReady = _interopRequireDefault(require("../_hooks/useContainerReady"));
 var _react = _interopRequireWildcard(require("react"));
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 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); }
@@ -30,8 +31,12 @@ const Radar = props => {
     singleIndicatorTooltip: singleIndicatorTooltipProp = false,
     singleIndicatorMode,
     singleIndicatorHoverFill,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

package/lib/components/Chart/Sankey/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 = _interopRequireDefault(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); }
@@ -104,6 +105,13 @@ const Sankey = props => {
     return option;
   }, [seriesData, seriesLinks, series]);
 
+  // getImage 只是「出图后把 dataURL 交出去」的出口，既不决定图怎么画，
+  // 也不该决定要不要重画。它进依赖数组会让 effect 跟着重跑 → setOption(notMerge)
+  // → 图重绘 → 再触发一次 finished → 再回调；消费方把图存进 state 就是死循环。
+  // 而且 finished 监听只在首次 init 时注册，闭包里锁死的是首帧的 getImage，
+  // 后续换了引用永远调不到 —— 依赖数组写了它也没用，是条死依赖。走 ref 两个问题一起解决。
+  const getImageRef = (0, _useLatestRef.default)(getImage);
+
   // Callback handling chart resize
   const handleResize = (0, _react.useCallback)(() => {
     // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
@@ -125,7 +133,7 @@ const Sankey = props => {
 
       // Attach the finished event listener on first initialization
       chart.on("finished", () => {
-        getImage?.(chart.getDataURL({
+        getImageRef.current?.(chart.getDataURL({
           type: "png",
           pixelRatio: 1,
           backgroundColor: "#fff"
@@ -149,7 +157,7 @@ const Sankey = props => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, getImage, containerReady]);
+  }, [chartOption, handleResize, getImageRef, containerReady]);
 
   // Clean up resources on unmount
   (0, _react.useEffect)(() => {

package/lib/components/Chart/Tree/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 = _interopRequireDefault(require("../../../hooks/useLatestRef"));
 var _hsuUtils = require("hsu-utils");
 var _tree = require("../_utils/tree");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -44,6 +45,13 @@ const Tree = props => {
     return option;
   }, [seriesData, series]);
 
+  // getImage 只是「出图后把 dataURL 交出去」的出口，既不决定图怎么画，
+  // 也不该决定要不要重画。它进依赖数组会让 effect 跟着重跑 → setOption(notMerge)
+  // → 图重绘 → 再触发一次 finished → 再回调；消费方把图存进 state 就是死循环。
+  // 而且 finished 监听只在首次 init 时注册，闭包里锁死的是首帧的 getImage，
+  // 后续换了引用永远调不到 —— 依赖数组写了它也没用，是条死依赖。走 ref 两个问题一起解决。
+  const getImageRef = (0, _useLatestRef.default)(getImage);
+
   // Callback handling chart resize
   const handleResize = (0, _react.useCallback)(() => {
     // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
@@ -65,7 +73,7 @@ const Tree = props => {
 
       // Attach the finished event listener on first initialization
       chart.on("finished", () => {
-        getImage?.(chart.getDataURL({
+        getImageRef.current?.(chart.getDataURL({
           type: "png",
           pixelRatio: 1,
           backgroundColor: "#fff"
@@ -89,7 +97,7 @@ const Tree = props => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, getImage, containerReady]);
+  }, [chartOption, handleResize, getImageRef, containerReady]);
 
   // Clean up resources on unmount
   (0, _react.useEffect)(() => {

package/lib/components/Select/_hooks/useSelectComposition.js

@@ -12,6 +12,7 @@ function useSelectComposition({
   onSearch
 }) {
   const [isComposing, setComposing] = (0, _react.useState)(false);
+  const hasOnSearch = !!onSearch;
   (0, _react.useEffect)(() => {
     const compositionend = () => {
       setComposing(false);
@@ -19,7 +20,7 @@ function useSelectComposition({
     const compositionstart = () => {
       setComposing(true);
     };
-    if (onSearch) {
+    if (hasOnSearch) {
       window.addEventListener("compositionstart", compositionstart);
       window.addEventListener("compositionend", compositionend);
     }
@@ -27,7 +28,10 @@ function useSelectComposition({
       window.removeEventListener("compositionstart", compositionstart);
       window.removeEventListener("compositionend", compositionend);
     };
-  }, [onSearch]);
+    // onSearch 在这里只被当作「要不要监听输入法事件」的真值判断，effect 体从不调它。
+    // 直接进依赖数组的话，消费方传内联箭头就会每渲染一次拆一次、装一次 window 监听；
+    // 只取「有没有传」这个布尔量，从无到有时照样会重新注册。
+  }, [hasOnSearch]);
   return {
     isComposing
   };

package/lib/components/Table/_hooks/useAutoScrolling.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _ahooks = require("ahooks");
 var _react = require("react");
+var _useLatestRef = require("../../../hooks/useLatestRef");
 const DEFAULT_INTERVAL = 2000;
 const DEFAULT_SPEED = 25;
 const SMOOTH_SCROLL_TICK = 10;
@@ -24,6 +25,13 @@ const useAutoScrolling = props => {
     autoScrollLoopMode = "reset",
     autoScrollingOffset = 0
   } = props;
+
+  // onAutoScrollEndAdd 在这里身兼两职：既是「有没有加载更多」的开关，又是真正去加载的动作。
+  // 整个 rAF 循环（loop → 依赖它 → 启停 effect 依赖 loop）都挂在它的引用上，
+  // 消费方传内联箭头就会每渲染一次重启一次滚动循环 —— 表格滚到一半被打回起点。
+  // 拆成两半：开关看布尔量（从无到有传入时仍会正确接上加载更多），动作取 ref 里的最新引用。
+  const onAutoScrollEndAddRef = (0, _useLatestRef.useLatestRef)(onAutoScrollEndAdd);
+  const hasOnAutoScrollEndAdd = !!onAutoScrollEndAdd;
   const validSpeed = autoScrollingSpeed > 0 ? autoScrollingSpeed : DEFAULT_SPEED;
   const smoothStep = validSpeed * SMOOTH_SCROLL_TICK / 1000;
   const [ready, setReady] = (0, _react.useState)(false);
@@ -237,11 +245,12 @@ const useAutoScrolling = props => {
     }, SMOOTH_SCROLL_TICK);
   }, [bindHover, checkSeamlessReset, clearSmoothTimer, getBody, interval, isAtBottom, isBodyScrollable, isSeamless, smoothStep]);
   const runLoadMore = (0, _react.useCallback)(() => {
-    if (!onAutoScrollEndAdd || pendingLoadMoreRef.current) return;
+    const loadMore = onAutoScrollEndAddRef.current;
+    if (!loadMore || pendingLoadMoreRef.current) return;
     pendingLoadMoreRef.current = true;
     phaseRef.current = "loading";
     const token = ++loadTokenRef.current;
-    onAutoScrollEndAdd().then(hasMore => {
+    loadMore().then(hasMore => {
       if (token !== loadTokenRef.current) return;
       const currentBody = getBody();
       if (hasMore) {
@@ -261,7 +270,7 @@ const useAutoScrolling = props => {
       if (token !== loadTokenRef.current) return;
       pendingLoadMoreRef.current = false;
     });
-  }, [autoScrollLoop, getBody, onAutoScrollEndAdd]);
+  }, [autoScrollLoop, getBody, onAutoScrollEndAddRef]);
   const loop = (0, _react.useCallback)(() => {
     rafRef.current = requestAnimationFrame(loop);
     if (!autoScrolling || !ready || !dataSource?.length || !ref?.current) {
@@ -293,7 +302,7 @@ const useAutoScrolling = props => {
         // In seamless mode the scroll never actually reaches the bottom; just keep scrolling
         phaseRef.current = "idle";
       } else if (isAtBottom(body)) {
-        if (onAutoScrollEndAdd) {
+        if (hasOnAutoScrollEndAdd) {
           runLoadMore();
         } else {
           if (autoScrollLoop) {
@@ -339,7 +348,7 @@ const useAutoScrolling = props => {
       return;
     }
     startSmoothStep(body, targetTop);
-  }, [autoScrollMode, autoScrollLoop, autoScrolling, bindHover, checkSeamlessReset, dataSource, getBody, getRowHeight, interval, isAtBottom, isBodyScrollable, isSeamless, onAutoScrollEndAdd, ready, ref, runLoadMore, setupSeamlessClones, startSmoothStep]);
+  }, [autoScrollMode, autoScrollLoop, autoScrolling, bindHover, checkSeamlessReset, dataSource, getBody, getRowHeight, interval, isAtBottom, isBodyScrollable, isSeamless, hasOnAutoScrollEndAdd, ready, ref, runLoadMore, setupSeamlessClones, startSmoothStep]);
   (0, _react.useEffect)(() => {
     if (!autoScrolling || !ready || !dataSource?.length || !ref?.current) {
       cleanup();
@@ -364,7 +373,7 @@ const useAutoScrolling = props => {
       cleanupClones();
       return;
     }
-    if (onAutoScrollEndAdd) {
+    if (hasOnAutoScrollEndAdd) {
       // In load-more mode, if scrolling had stopped, resume auto-scrolling when new data arrives
       if (phaseRef.current === "stopped") {
         phaseRef.current = autoScrollMode === "row" ? "wait" : "idle";
@@ -377,7 +386,7 @@ const useAutoScrolling = props => {
       phaseRef.current = autoScrollMode === "row" ? "wait" : "idle";
       waitUntilRef.current = autoScrollMode === "row" ? performance.now() + interval : 0;
     }
-  }, [autoScrollMode, cleanupClones, dataSource, getBody, interval, isBodyScrollable, isSeamless, onAutoScrollEndAdd]);
+  }, [autoScrollMode, cleanupClones, dataSource, getBody, interval, isBodyScrollable, isSeamless, hasOnAutoScrollEndAdd]);
   (0, _react.useEffect)(() => {
     if (!autoScrolling || !ref?.current) return;
     let resizeRaf = null;

package/lib/hooks/useShallowStable.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 把一个**内容没变、但每次渲染都新建**的对象收敛成**引用恒定**的对象：
+ * 浅比较（自有键 ＋ `Object.is` 比值）相等就继续返回上一次那个引用。
+ *
+ * 用途只有一个：让它可以直接进 `useMemo` / `useEffect` 的依赖数组。
+ *
+ * React 的依赖数组按 `Object.is` 比引用，所以依赖里只要混进一个「每次渲染都新建
+ * 的对象」，memo 就**恒不命中**、effect 就**每渲染必重跑**。组件内部最容易出现
+ * 这种对象的地方是 rest 解构：
+ *
+ * ```tsx
+ * const { className, style, ...coreOption } = props; // coreOption 每次都是新对象
+ * const option = useMemo(() => ({ ...coreOption }), [coreOption]); // 永远不命中
+ * ```
+ *
+ * 消费方就算把每一个 prop 都 memo 好，也躲不掉——新对象是组件自己建的。
+ * 正确写法是让这个对象回到值语义：
+ *
+ * ```tsx
+ * const { className, style, ...restOption } = props;
+ * const coreOption = useShallowStable(restOption); // 内容不变 → 引用不变
+ * ```
+ *
+ * 注意这**不是**「缓存结果跳过副作用」：memo 该重算时照样重算、effect 该重跑时
+ * 照样重跑——只要 rest 里任何一个值真的变了，浅比较就不相等，新引用立刻透出去。
+ *
+ * 渲染期间读写 ref 的安全性：并发渲染下被丢弃的那次渲染可能已经把 ref 换成了它
+ * 自己的对象，但那个对象与当次 props 浅相等，所以后续渲染拿到的引用**内容永远
+ * 与当前 props 一致**，不会读到过期值。
+ */
+export declare function useShallowStable<T extends object>(value: T): T;
+export default useShallowStable;

package/lib/hooks/useShallowStable.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useShallowStable = useShallowStable;
+var _react = require("react");
+/**
+ * 把一个**内容没变、但每次渲染都新建**的对象收敛成**引用恒定**的对象：
+ * 浅比较（自有键 ＋ `Object.is` 比值）相等就继续返回上一次那个引用。
+ *
+ * 用途只有一个：让它可以直接进 `useMemo` / `useEffect` 的依赖数组。
+ *
+ * React 的依赖数组按 `Object.is` 比引用，所以依赖里只要混进一个「每次渲染都新建
+ * 的对象」，memo 就**恒不命中**、effect 就**每渲染必重跑**。组件内部最容易出现
+ * 这种对象的地方是 rest 解构：
+ *
+ * ```tsx
+ * const { className, style, ...coreOption } = props; // coreOption 每次都是新对象
+ * const option = useMemo(() => ({ ...coreOption }), [coreOption]); // 永远不命中
+ * ```
+ *
+ * 消费方就算把每一个 prop 都 memo 好，也躲不掉——新对象是组件自己建的。
+ * 正确写法是让这个对象回到值语义：
+ *
+ * ```tsx
+ * const { className, style, ...restOption } = props;
+ * const coreOption = useShallowStable(restOption); // 内容不变 → 引用不变
+ * ```
+ *
+ * 注意这**不是**「缓存结果跳过副作用」：memo 该重算时照样重算、effect 该重跑时
+ * 照样重跑——只要 rest 里任何一个值真的变了，浅比较就不相等，新引用立刻透出去。
+ *
+ * 渲染期间读写 ref 的安全性：并发渲染下被丢弃的那次渲染可能已经把 ref 换成了它
+ * 自己的对象，但那个对象与当次 props 浅相等，所以后续渲染拿到的引用**内容永远
+ * 与当前 props 一致**，不会读到过期值。
+ */
+function useShallowStable(value) {
+  const ref = (0, _react.useRef)(value);
+  if (!shallowEqual(ref.current, value)) {
+    ref.current = value;
+  }
+  return ref.current;
+}
+function shallowEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (const key of aKeys) {
+    if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+    if (!Object.is(a[key], b[key])) {
+      return false;
+    }
+  }
+  return true;
+}
+var _default = exports.default = useShallowStable;

package/lib/layout/Menu/_hooks/useOnlyLvOneMenu.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useOnlyLvOneMenu = void 0;
 var _react = require("react");
+var _useLatestRef = require("../../../hooks/useLatestRef");
 var _reactRouter = require("react-router");
 /**
  * Handle the top-level-only menu logic
@@ -17,15 +18,20 @@ const useOnlyLvOneMenu = ({
   setMenuKey
 }) => {
   const location = (0, _reactRouter.useLocation)();
+  // getCurrChildItems 是 effect 体里发出去的通知，本身进依赖数组是这一类死循环的标准配方：
+  // 消费方传内联箭头 → 每次渲染新引用 → effect 重跑 → setOpenkeys([item.key]) 每次都是
+  // 新数组必定触发重渲染 → 又是新引用 …… 直到 React 抛 Maximum update depth exceeded。
+  // 通知取 ref 里的最新引用，依赖数组只留真正的输入。
+  const getCurrChildItemsRef = (0, _useLatestRef.useLatestRef)(getCurrChildItems);
   (0, _react.useEffect)(() => {
     if (onlyLvOneMenu) {
       const item = items.find(i => i.key === "/" + location.pathname.split("/").filter(Boolean)[0]);
       if (item) {
-        getCurrChildItems?.(item.children || []);
+        getCurrChildItemsRef.current?.(item.children || []);
         setOpenkeys([item.key]);
         setMenuKey(item.key);
       }
     }
-  }, [items, getCurrChildItems, location, onlyLvOneMenu, setOpenkeys, setMenuKey]);
+  }, [items, getCurrChildItemsRef, location, onlyLvOneMenu, setOpenkeys, setMenuKey]);
 };
 exports.useOnlyLvOneMenu = useOnlyLvOneMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "2.5.4",
+  "version": "2.5.6",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

package/src/__tests__/callbackDepsGuard.test.ts

@@ -0,0 +1,72 @@
+import fs from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+import { hookDeps, walkSources } from "./depsScan";
+
+/**
+ * 防回归守卫：**回调 prop 不许进 effect 依赖数组**。
+ *
+ * 这条缺陷没有任何信号——不报错、不变慢，只是消费方一传内联箭头
+ * （`onXxx={(v) => setV(v)}`，React 里最常见的写法）就重复订阅 / 重复通知，
+ * 严重的直接死循环到 `Maximum update depth exceeded`。
+ * 靠人工 review 拦不住，所以扫源码。
+ *
+ * 正确写法见 `src/hooks/useLatestRef.ts`：
+ * - 调用取 ref 里的最新引用；
+ * - 「有没有传回调」若决定要不要注册监听，就单独拆一个布尔量进依赖数组，
+ *   这样「从无到有传入回调」仍会正确注册。
+ *
+ * 确实无害的写法登记在 ALLOWED 里，每条都要写清为什么无害。
+ */
+
+const SRC = path.resolve(__dirname, "..");
+
+/** 回调型标识符：`onXxx` 形态，外加几个明确的出口型回调名 */
+const EXTRA_CALLBACK_NAMES = new Set(["getImage", "labelRender"]);
+const isCallbackDep = (name: string) =>
+  (/^on[A-Z]/.test(name) && !name.endsWith("Ref")) ||
+  EXTRA_CALLBACK_NAMES.has(name);
+
+/** `文件相对路径::依赖名` → 无害的理由 */
+const ALLOWED: Record<string, string> = {
+  "components/Chat/ChatHistory/index.tsx::onScrollEnd":
+    "只在 DOM scroll 监听里调，effect 体不调它；重订阅是同一节点上摘一个装一个，无副作用",
+  "components/DatePicker/index.tsx::onChange":
+    "纯 ref 同步 effect：effect 体只写 ref，不调回调、不订阅任何东西",
+  "components/DatePicker/RangePicker/index.tsx::onChange":
+    "同上，纯 ref 同步 effect",
+  "components/Tree/index.tsx::onSelectPath": "同上，纯 ref 同步 effect",
+};
+
+const EFFECT_RE = /use(?:Layout)?Effect\(/g;
+const effectDeps = (src: string) => hookDeps(src, EFFECT_RE);
+
+describe("回调 prop 不进 effect 依赖数组", () => {
+  it("全库无未登记的命中", () => {
+    const offenders: string[] = [];
+
+    for (const file of walkSources(SRC)) {
+      const rel = path.relative(SRC, file).split(path.sep).join("/");
+      const src = fs.readFileSync(file, "utf8");
+
+      for (const [line, dep] of effectDeps(src)) {
+        if (!isCallbackDep(dep)) continue;
+        if (ALLOWED[`${rel}::${dep}`]) continue;
+        offenders.push(`${rel}:${line}  ${dep}`);
+      }
+    }
+
+    expect(offenders).toEqual([]);
+  });
+
+  it("守卫本身能抓到问题（自测）", () => {
+    const bad = `
+      useEffect(() => {
+        onDone?.();
+      }, [value, onDone]);
+    `;
+    expect(effectDeps(bad).map(([, d]) => d)).toContain("onDone");
+    expect(isCallbackDep("onDone")).toBe(true);
+    expect(isCallbackDep("onDoneRef")).toBe(false);
+  });
+});