@ant-design/pro-components 3.1.12-0 → 3.1.13-0

package/es/table/components/EditableTable/index.js

@@ -1,11 +1,12 @@
 import { PlusOutlined } from '@ant-design/icons';
 import { get, set, useControlledState } from '@rc-component/util';
 import { Button, Form } from 'antd';
-import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import ProForm, { ProFormDependency } from "../../../form";
 import { useIntl } from "../../../provider";
 import { isDeepEqualReact, runFunction, useDeepCompareEffect, useRefFunction } from "../../../utils";
 import ProTable from "../../Table";
+import { resolveTableViewDefaultDom } from "../../utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -93,25 +94,15 @@ function createTopButtonProps(creatorButtonDom, columnsLength) {
           children
         }) => /*#__PURE__*/_jsxs("thead", {
           className: className,
-          children: [children, /*#__PURE__*/_jsxs("tr", {
-            style: {
-              position: 'relative'
-            },
-            children: [/*#__PURE__*/_jsx("td", {
-              colSpan: 0,
+          children: [children, /*#__PURE__*/_jsx("tr", {
+            children: /*#__PURE__*/_jsx("td", {
+              colSpan: columnsLength || 1,
               style: {
-                visibility: 'hidden'
+                padding: 0,
+                border: 'none'
               },
               children: creatorButtonDom
-            }), /*#__PURE__*/_jsx("td", {
-              style: {
-                position: 'absolute',
-                left: 0,
-                width: '100%'
-              },
-              colSpan: columnsLength,
-              children: creatorButtonDom
-            })]
+            })
           })]
         })
       }
@@ -125,7 +116,7 @@ function createTopButtonProps(creatorButtonDom, columnsLength) {
 function createBottomButtonProps(creatorButtonDom, tableViewRender) {
   return {
     tableViewRender: (_, dom) => /*#__PURE__*/_jsxs(_Fragment, {
-      children: [tableViewRender?.(_, dom) ?? dom, creatorButtonDom]
+      children: [tableViewRender?.(_, dom) ?? resolveTableViewDefaultDom(dom), creatorButtonDom]
     })
   };
 }
@@ -139,7 +130,7 @@ function useCreatorButton({
   tableViewRender
 }) {
   const creatorButtonDom = useMemo(() => {
-    if (!shouldShowCreatorButton(maxLength, value?.length || 0, recordCreatorProps)) {
+    if (!shouldShowCreatorButton(maxLength, value?.length ?? 0, recordCreatorProps)) {
       return false;
     }
     if (!recordCreatorProps) {
@@ -181,12 +172,17 @@ function EditableTable(props) {
     ...rest
   } = props;
   const preData = useRef(undefined);
+  /** ProFormDependency render 回调写入最新 list，useEffect 读取并处理副作用 */
+  const latestFormListRef = useRef(null);
   const actionRef = useRef();
   const formRef = useRef();
   const form = Form.useFormInstance();
 
   // 设置 ref
-  useImperativeHandle(rest.actionRef, () => actionRef.current, [actionRef.current]);
+  // actionRef 是 useRef 返回的稳定对象，其引用永远不变，
+  // 将 actionRef.current 放入 deps 无效（ref 变化不触发 effect），应使用空数组。
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useImperativeHandle(rest.actionRef, () => actionRef.current, []);
 
   // 在 name 模式下，如果没有传递 value prop，尝试从表单值中获取初始值
   const getInitialValue = () => {
@@ -207,15 +203,14 @@ function EditableTable(props) {
     return [];
   };
   const [value, setValueInner] = useControlledState(getInitialValue, props.value);
-  const onChangeFn = props.controlled ? props.onChange : undefined;
-  const setValue = useCallback(updater => {
-    setValueInner(prev => {
-      const next = typeof updater === 'function' ? updater(prev) : updater;
-      // 在非受控模式下，onChange 应该在 onDataSourceChange 中触发
-      onChangeFn?.(next);
-      return next;
-    });
-  }, [onChangeFn]);
+  // useRefFunction 等价于 useCallback(fn, [])，引用永远稳定，项目统一约定
+  const setValue = useRefFunction(updater => {
+    // setValue 仅负责更新内部数据状态，不触发任何 onChange 副作用：
+    //   受控模式的 onChange 由 handleValuesChange 在表单值变化时触发
+    //   非受控模式的 onChange 由 onDataSourceChange 回调在行保存/删除后触发
+    // 这样保证每次用户操作 onChange 只被调用一次，符合 React 纯函数规范。
+    setValueInner(updater);
+  });
   const getRowKey = React.useMemo(() => {
     if (typeof rowKey === 'function') {
       return rowKey;
@@ -235,51 +230,47 @@ function EditableTable(props) {
    */
   const syncFormValuesExcludingEditing = useRefFunction((dataSource, editingKeysSet, namePath) => {
     if (!formRef.current) return;
-    try {
-      if (namePath && namePath.length > 0) {
-        // name 模式：需要保留正在编辑的行
-        const currentFormValues = formRef.current.getFieldsValue() || {};
-        const currentList = get(currentFormValues, namePath);
-        if (currentList && Array.isArray(currentList)) {
-          // 构建新的表单值，保留正在编辑的行
-          // 使用 Map 优化查找性能，将 O(n²) 降低到 O(n)
-          const currentListMap = new Map();
-          currentList.forEach((item, idx) => {
-            const key = getRowKey(item, idx);
-            currentListMap.set(String(key), item);
-          });
-          const newList = dataSource.map((item, index) => {
-            const key = getRowKey(item, index);
-            const keyStr = String(key);
-
-            // 如果该行正在编辑，保留表单中的值
-            if (editingKeysSet.has(keyStr)) {
-              return currentListMap.get(keyStr) || item;
-            }
-            return item;
-          });
-          const newValue = set({}, namePath, newList);
-          formRef.current.setFieldsValue(newValue);
-        } else {
-          const newValue = set({}, namePath, dataSource);
-          formRef.current.setFieldsValue(newValue);
-        }
-      } else {
-        // 非 name 模式：直接设置值
-        const formValues = {};
-        dataSource.forEach((current, index) => {
-          const key = getRowKey(current, index);
+    if (namePath && namePath.length > 0) {
+      // name 模式：需要保留正在编辑的行
+      const currentFormValues = formRef.current.getFieldsValue() || {};
+      const currentList = get(currentFormValues, namePath);
+      if (currentList && Array.isArray(currentList)) {
+        // 构建新的表单值，保留正在编辑的行
+        // 使用 Map 优化查找性能，将 O(n²) 降低到 O(n)
+        const currentListMap = new Map();
+        currentList.forEach((item, idx) => {
+          const key = getRowKey(item, idx);
+          currentListMap.set(String(key), item);
+        });
+        const newList = dataSource.map((item, index) => {
+          const key = getRowKey(item, index);
           const keyStr = String(key);
-          if (!editingKeysSet.has(keyStr)) {
-            formValues[keyStr] = current;
+
+          // 如果该行正在编辑，保留表单中的值
+          if (editingKeysSet.has(keyStr)) {
+            return currentListMap.get(keyStr) || item;
           }
+          return item;
         });
-        if (Object.keys(formValues).length > 0) {
-          formRef.current.setFieldsValue(formValues);
+        const newValue = set({}, namePath, newList);
+        formRef.current.setFieldsValue(newValue);
+      } else {
+        const newValue = set({}, namePath, dataSource);
+        formRef.current.setFieldsValue(newValue);
+      }
+    } else {
+      // 非 name 模式：直接设置值
+      const formValues = {};
+      dataSource.forEach((current, index) => {
+        const key = getRowKey(current, index);
+        const keyStr = String(key);
+        if (!editingKeysSet.has(keyStr)) {
+          formValues[keyStr] = current;
         }
+      });
+      if (Object.keys(formValues).length > 0) {
+        formRef.current.setFieldsValue(formValues);
       }
-    } catch (error) {
-      console.warn('Failed to sync form values:', error);
     }
   });
 
@@ -308,16 +299,19 @@ function EditableTable(props) {
   });
 
   /**
-   * 根据不同的情况返回不同的 rowKey
+   * 根据不同的模式（name / 非 name）将用户传入的 rowKey 解析为表单可用的 key。
+   * - 非 name 模式 + 数字索引 → 转换为实际 rowKey
+   * - name 模式 → 将 rowKey 转换为数组索引
+   * - 其他情况 → 原样返回
    */
-  const coverRowKey = useRefFunction(finlayRowKey => {
-    if (typeof finlayRowKey === 'number' && !props.name) {
-      return convertIndexToRowKey(finlayRowKey);
+  const resolveRowKey = useRefFunction(inputKey => {
+    if (typeof inputKey === 'number' && !props.name) {
+      return convertIndexToRowKey(inputKey);
     }
     if (props.name) {
-      return convertRowKeyToIndex(finlayRowKey);
+      return convertRowKeyToIndex(inputKey);
     }
-    return finlayRowKey;
+    return inputKey;
   });
 
   /**
@@ -334,8 +328,8 @@ function EditableTable(props) {
     if (rowIndex == null) {
       throw new Error('rowIndex is required');
     }
-    const finlayRowKey = coverRowKey(rowIndex);
-    const rowKeyName = buildFormFieldPath(finlayRowKey);
+    const resolvedKey = resolveRowKey(rowIndex);
+    const rowKeyName = buildFormFieldPath(resolvedKey);
     return formRef.current?.getFieldValue(rowKeyName);
   });
 
@@ -344,11 +338,14 @@ function EditableTable(props) {
    */
   const getRowsData = useRefFunction(() => {
     const rowKeyName = [props.name].flat(1).filter(Boolean);
-    if (Array.isArray(rowKeyName) && rowKeyName.length === 0) {
+    // 非 name 模式：rowKeyName 为空，从表单顶层拿所有字段，值是 Record<rowKey, DataType>
+    if (rowKeyName.length === 0) {
       const rowData = formRef.current?.getFieldsValue();
-      if (Array.isArray(rowData)) return rowData;
+      if (!rowData) return undefined;
+      // getFieldsValue() 返回的永远是对象，按 key 排列后取 values
       return Object.keys(rowData).map(key => rowData[key]);
     }
+    // name 模式：直接取数组
     return formRef.current?.getFieldValue(rowKeyName);
   });
 
@@ -359,8 +356,8 @@ function EditableTable(props) {
     if (rowIndex == null) {
       throw new Error('rowIndex is required');
     }
-    const finlayRowKey = coverRowKey(rowIndex);
-    const rowKeyName = buildFormFieldPath(finlayRowKey);
+    const resolvedKey = resolveRowKey(rowIndex);
+    const rowKeyName = buildFormFieldPath(resolvedKey);
     const currentRowData = getRowData(rowIndex);
     const newRowData = {
       ...currentRowData,
@@ -371,12 +368,12 @@ function EditableTable(props) {
     if (props.name) {
       const tableName = [props.name].flat(1).filter(Boolean);
       // 优先从 value prop 获取数据（受控模式），否则从表单值获取
-      let currentTableData = props.value || formRef.current?.getFieldValue(tableName);
+      const currentTableData = props.value || formRef.current?.getFieldValue(tableName);
       if (Array.isArray(currentTableData)) {
         // 找到要更新的行的索引
-        const rowIndexToUpdate = typeof finlayRowKey === 'number' ? finlayRowKey : currentTableData.findIndex((row, index) => {
+        const rowIndexToUpdate = typeof resolvedKey === 'number' ? resolvedKey : currentTableData.findIndex((row, index) => {
           const rowKey = getRowKey?.(row, index);
-          return rowKey === finlayRowKey || rowKey?.toString() === finlayRowKey?.toString();
+          return rowKey === resolvedKey || rowKey?.toString() === resolvedKey?.toString();
         });
         if (rowIndexToUpdate >= 0 && rowIndexToUpdate < currentTableData.length) {
           // 更新数组中的对应行
@@ -415,7 +412,39 @@ function EditableTable(props) {
       getRowsData,
       setRowData
     };
-  }, [coverRowKey, props.name, getRowData, getRowsData, setRowData]);
+  }, [resolveRowKey, props.name, getRowData, getRowsData, setRowData]);
+
+  /**
+   * 处理 name 模式下表单内部编辑引起的 onValuesChange 副作用。
+   * ProFormDependency 的渲染回调是纯函数，仅把最新 list 写入 latestFormListRef；
+   * 此 effect 在每次渲染后读取 ref，完成真正的副作用（比较 + 回调触发 + preData 更新）。
+   * 这样在 React 严格模式 double-invoke 下也不会出现 preData 被更新两次导致
+   * changeIndex 找错位置的问题。
+   */
+  useEffect(() => {
+    if (!props.name) return;
+    const list = latestFormListRef.current;
+
+    // 初始化 preData（首次挂载时 preData 还没有值）
+    if (!preData.current) {
+      preData.current = value;
+      return;
+    }
+    if (!list || !Array.isArray(list)) {
+      preData.current = value;
+      return;
+    }
+    const changeIndex = list.findIndex((item, index) => {
+      return !isDeepEqualReact(item, preData.current?.[index]);
+    });
+    if (changeIndex !== -1) {
+      const changeItem = list[changeIndex];
+      props?.editable?.onValuesChange?.(changeItem, list);
+    }
+
+    // 必须在回调触发之后再更新 preData，保证对比基准正确
+    preData.current = list;
+  });
 
   /**
    * 受控模式下同步表单值
@@ -500,9 +529,12 @@ function EditableTable(props) {
 
   /**
    * 构建可编辑属性
-   * 使用 useMemo 优化性能，避免不必要的重新创建
+   *
+   * 使用 useRefFunction 替代 useMemo：props.editable 是对象，用户通常内联传入
+   * `editable={{ ... }}`，每次父组件 render 都产生新引用导致 useMemo 永远失效。
+   * useRefFunction 返回稳定引用的 getter，内部始终读取最新 props。
    */
-  const editableProps = useMemo(() => {
+  const getEditableProps = useRefFunction(() => {
     const baseProps = {
       ...props.editable
     };
@@ -511,7 +543,8 @@ function EditableTable(props) {
       baseProps.onValuesChange = handleValuesChange;
     }
     return baseProps;
-  }, [props.editable, props.onValuesChange, props.controlled, props.onChange, handleValuesChange]);
+  });
+  const editableProps = getEditableProps();
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(EditableTableActionContext.Provider, {
       value: actionRef,
@@ -535,8 +568,8 @@ function EditableTable(props) {
         },
         dataSource: value,
         onDataSourceChange: dataSource => {
-          // setValue 会触发 onChange，但我们需要确保数据已经正确更新
-          // 所以先设置数据，然后手动触发 onChange
+          // setValue 仅更新内部数据状态，不触发任何 onChange 副作用。
+          // 非受控模式的 onChange 由下方路径 B 触发，受控模式由 handleValuesChange 触发。
           setValue(dataSource);
 
           /**
@@ -561,34 +594,11 @@ function EditableTable(props) {
     }), props.name ? /*#__PURE__*/_jsx(ProFormDependency, {
       name: [props.name],
       children: changeValue => {
-        // 初始化 preData
-        if (!preData.current) {
-          preData.current = value;
-          return null;
-        }
         const namePath = [props.name].flat(1);
         const list = get(changeValue, namePath);
-
-        // 添加空值检查，避免后续操作出错
-        if (!list || !Array.isArray(list)) {
-          preData.current = value;
-          return null;
-        }
-
-        // 在更新 preData 之前找到变化的项
-        // 使用 findIndex 可以同时获取变化的项和索引
-        const changeIndex = list.findIndex((item, index) => {
-          return !isDeepEqualReact(item, preData.current?.[index]);
-        });
-
-        // 只有在找到变化项时才触发回调
-        if (changeIndex !== -1) {
-          const changeItem = list[changeIndex];
-          props?.editable?.onValuesChange?.(changeItem, list);
-        }
-
-        // 在找到 changeItem 之后再更新 preData，确保后续比较正确
-        preData.current = list;
+        // 纯计算：派生出当前 list，通过 latestFormList ref 传给 useEffect
+        // 不在此处修改任何 ref 或触发任何回调
+        latestFormListRef.current = list ?? null;
         return null;
       }
     }) : null]
@@ -615,11 +625,10 @@ function FieldEditableTable(props) {
     },
     shouldUpdate: (prev, next) => {
       const name = [props.name].flat(1);
-      try {
-        return JSON.stringify(get(prev, name)) !== JSON.stringify(get(next, name));
-      } catch (_error) {
-        return true;
-      }
+      // 用 isDeepEqualReact 代替 JSON.stringify：
+      // 1. 避免循环引用导致 JSON.stringify 抛出
+      // 2. 大数据量时性能更优（短路退出）
+      return !isDeepEqualReact(get(prev, name), get(next, name));
     },
     ...props?.formItemProps,
     name: props.name,

package/es/table/components/Form/FormRender.d.ts

@@ -27,5 +27,5 @@ export type TableFormItem<T, U = any> = {
  * @param param0
  * @returns
  */
-declare const FormRender: <T, U = any>({ onSubmit, formRef, dateFormatter, type, columns, action, ghost, manualRequest, onReset, submitButtonLoading, search: searchConfig, form: formConfig, bordered, }: TableFormItem<T, U>) => import("react/jsx-runtime").JSX.Element;
+declare const FormRender: <T, U = any>({ onSubmit, formRef, dateFormatter, type, columns, action, ghost, manualRequest, onReset, submitButtonLoading, search: searchConfig, form: formConfig, bordered, }: TableFormItem<T, U>) => React.JSX.Element;
 export default FormRender;

package/es/table/components/Form/FormRender.js

@@ -6,14 +6,8 @@ import { BetaSchemaForm } from "../../../form";
 import { ProProvider } from "../../../provider";
 import { jsx as _jsx } from "react/jsx-runtime";
 function toLowerLine(str) {
-  let temp = str.replace(/[A-Z]/g, match => {
-    return `-${match.toLowerCase()}`;
-  });
-  if (temp.startsWith('-')) {
-    // 如果首字母是大写，执行replace时会多一个_，这里需要去掉
-    temp = temp.slice(1);
-  }
-  return temp;
+  const result = str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
+  return result.startsWith('-') ? result.slice(1) : result;
 }
 /**
  * 获取当前选择的 Form Layout 配置
@@ -40,7 +34,7 @@ const getFormCompetent = (isForm, searchConfig) => {
  */
 const getFromProps = (isForm, searchConfig, name) => {
   if (!isForm && name === 'LightFilter') {
-    // 传给 lightFilter 的问题
+    // 传给轻量筛选表单的配置
     return omit({
       ...searchConfig
     }, ['labelWidth', 'defaultCollapsed', 'filterType']);
@@ -98,15 +92,12 @@ const FormRender = ({
     hashId
   } = useContext(ProProvider);
   const isForm = type === 'form';
-  /** 提交表单，根据两种模式不同，方法不相同 */
-  const submit = async (values, firstLoad) => {
-    if (onSubmit) {
-      onSubmit(values, firstLoad);
-    }
-  };
   const {
     getPrefixCls
   } = useContext(ConfigProvider.ConfigContext);
+  const className = getPrefixCls('pro-table-search');
+  const formClassName = getPrefixCls('pro-table-form');
+  const competentName = useMemo(() => getFormCompetent(isForm, searchConfig), [searchConfig, isForm]);
   const columnsList = useMemo(() => {
     return columns.filter(item => {
       if (item === Table.EXPAND_COLUMN || item === Table.SELECTION_COLUMN) {
@@ -128,24 +119,24 @@ const FormRender = ({
         ...(item.search && typeof item.search === 'object' ? item.search : {}),
         valueType: finalValueType,
         proFieldProps: {
+          ...(competentName === 'LightFilter' && item.proFieldProps?.light === undefined ? {
+            light: true
+          } : {}),
           ...item.proFieldProps,
           proFieldKey: columnKey ? `table-field-${columnKey}` : undefined
         }
       };
     });
-  }, [columns, type]);
-  const className = getPrefixCls('pro-table-search');
-  const formClassName = getPrefixCls('pro-table-form');
-  const competentName = useMemo(() => getFormCompetent(isForm, searchConfig), [searchConfig, isForm]);
+  }, [columns, type, competentName]);
 
   // 传给每个表单的配置，理论上大家都需要
-  const loadingProps = useMemo(() => ({
+  const loadingProps = {
     submitter: {
       submitButtonProps: {
         loading: submitButtonLoading
       }
     }
-  }), [submitButtonLoading]);
+  };
   return /*#__PURE__*/_jsx("div", {
     className: clsx(hashId, {
       [getPrefixCls('pro-card')]: true,
@@ -186,14 +177,14 @@ const FormRender = ({
           });
           /** 如果是手动模式不需要提交 */
           if (manualRequest) return;
-          submit(values, true);
+          onSubmit?.(values, true);
         }
       },
       onReset: values => {
         onReset?.(values);
       },
       onFinish: values => {
-        submit(values, false);
+        onSubmit?.(values, false);
       },
       initialValues: formConfig?.initialValues
     })

package/es/table/components/Form/index.d.ts

@@ -20,5 +20,5 @@ type BaseFormProps<T, U> = {
 };
 declare const _default: <T, U>(props: BaseFormProps<T, U> & {
     ghost?: boolean | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default _default;

package/es/table/components/Form/index.js

@@ -31,51 +31,29 @@ const FormSearch = props => {
     pageSize: pagination.pageSize
   }) : {}, [pagination]);
   const onSubmitHandler = useRefFunction((value, firstLoad) => {
-    // 检查是否需要验证
-    if (form?.ignoreRules === false && firstLoad) {
-      formRef?.current?.validateFields().then(() => {
-        const submitParams = {
-          ...value,
-          _timestamp: Date.now(),
-          ...pageInfo
-        };
-        const omitParams = omit(beforeSearchSubmit(submitParams), Object.keys(pageInfo));
-        onFormSearchSubmit(omitParams);
-        if (!firstLoad) {
-          // back first page
-          action.current?.setPageInfo?.({
-            current: 1
-          });
-        }
-        // 不是第一次提交就不触发，第一次提交是 js 触发的
+    const runSubmit = () => {
+      const submitParams = {
+        ...value,
+        _timestamp: Date.now(),
+        ...pageInfo
+      };
+      const omitParams = omit(beforeSearchSubmit(submitParams), Object.keys(pageInfo));
+      onFormSearchSubmit(omitParams);
+      if (!firstLoad) {
+        // 不是第一次提交才跳回第一页，并触发 onSubmit
         // 为了解决 https://github.com/ant-design/pro-components/issues/579
-        if (onSubmit && !firstLoad) {
-          onSubmit?.(value);
-        }
-      }).catch(e => {
-        // 验证失败，不执行后续逻辑
-        // console.error(e);
-      });
-      return;
-    }
-    const submitParams = {
-      ...value,
-      _timestamp: Date.now(),
-      ...pageInfo
+        action.current?.setPageInfo?.({
+          current: 1
+        });
+        onSubmit?.(value);
+      }
     };
-    const omitParams = omit(beforeSearchSubmit(submitParams), Object.keys(pageInfo));
-    onFormSearchSubmit(omitParams);
-    if (!firstLoad) {
-      // back first page
-      action.current?.setPageInfo?.({
-        current: 1
-      });
-    }
-    // 不是第一次提交就不触发，第一次提交是 js 触发的
-    // 为了解决 https://github.com/ant-design/pro-components/issues/579
-    if (onSubmit && !firstLoad) {
-      onSubmit?.(value);
+    if (form?.ignoreRules === false && firstLoad) {
+      // 首次提交时需要先通过校验再执行
+      formRef?.current?.validateFields().then(runSubmit).catch(() => {});
+      return;
     }
+    runSubmit();
   });
   const onResetHandler = useRefFunction(value => {
     const resetLogic = () => {

package/es/table/components/ListToolBar/HeaderMenu.js

@@ -2,8 +2,9 @@ import { DownOutlined } from '@ant-design/icons';
 import { useControlledState } from '@rc-component/util';
 import { Dropdown, Space, Tabs } from 'antd';
 import { clsx } from 'clsx';
-import React, { useCallback, useContext } from 'react';
+import React, { useContext } from 'react';
 import { ProProvider } from "../../../provider";
+import { useRefFunction } from "../../../utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const HeaderMenu = props => {
@@ -19,13 +20,11 @@ const HeaderMenu = props => {
     defaultActiveKey
   } = props;
   const [activeKey, setActiveKeyInner] = useControlledState(propActiveKey || defaultActiveKey, propActiveKey);
-  const setActiveKey = useCallback(updater => {
-    setActiveKeyInner(prev => {
-      const next = typeof updater === 'function' ? updater(prev) : updater;
-      props.onChange?.(next, prev);
-      return next;
-    });
-  }, [props.onChange]);
+  const setActiveKey = useRefFunction(next => {
+    const prev = activeKey;
+    props.onChange?.(next, prev);
+    setActiveKeyInner(next);
+  });
   if (items.length < 1) {
     return null;
   }