@ant-design/pro-components 3.1.1-1 → 3.1.3-0

package/es/form/BaseForm/BaseForm.js

@@ -370,13 +370,27 @@ export function BaseForm(props) {
   } = props;
   const formRef = useRef({});
   const [loading, setLoadingInner] = useControlledState(false, propsLoading);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onLoadingChangeCallback = useRefFunction(l => {
+    onLoadingChange?.(l);
+  });
+
+  /**
+   * 包装 setLoading，使用 queueMicrotask 延迟回调调用
+   * 避免在渲染阶段调用外部回调导致的 React 警告
+   */
   const setLoading = useCallback(updater => {
     setLoadingInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      onLoadingChange?.(next);
+      queueMicrotask(() => {
+        onLoadingChangeCallback(next);
+      });
       return next;
     });
-  }, [onLoadingChange]);
+  }, [onLoadingChangeCallback]);
   const [urlSearch, setUrlSearch] = useUrlSearchParams({}, {
     disabled: !syncToUrl
   });

package/es/form/BaseForm/LightWrapper/index.js

@@ -94,7 +94,13 @@ const LightWrapper = props => {
         onChange: e => {
           setTempValue(e?.target ? e.target.value : e);
         },
-        ...children.props
+        ...children.props,
+        // light 模式下由外层 FilterDropdown 统一描边，内层 Select/TreeSelect/DatePicker 等统一使用 borderless，各 Field 组件无需再根据 light 判断
+        variant: 'borderless',
+        fieldProps: {
+          ...children.props?.fieldProps,
+          variant: 'borderless'
+        }
       })
     })
   }));

package/es/form/BaseForm/Submitter/index.js

@@ -45,7 +45,7 @@ const Submitter = props => {
   const dom = [];
   if (resetButtonProps !== false) {
     dom.push( /*#__PURE__*/_createElement(Button, {
-      ...omit(resetButtonProps ?? {}, ['preventDefault']),
+      ...omit(resetButtonProps ?? {}, ['preventDefault', 'fieldProps']),
       key: "rest",
       onClick: e => {
         if (!resetButtonProps?.preventDefault) reset();
@@ -56,7 +56,7 @@ const Submitter = props => {
   if (submitButtonProps !== false) {
     dom.push( /*#__PURE__*/_createElement(Button, {
       type: "primary",
-      ...omit(submitButtonProps || {}, ['preventDefault']),
+      ...omit(submitButtonProps || {}, ['preventDefault', 'fieldProps']),
       key: "submit",
       onClick: e => {
         if (!submitButtonProps?.preventDefault) submit();

package/es/form/components/Cascader/index.d.ts

@@ -8,7 +8,7 @@ declare const _default: React.ForwardRefExoticComponent<{
     emptyText?: React.ReactNode;
     cacheForSwr?: boolean | undefined;
     disabled?: boolean | undefined;
-    width?: number | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    width?: number | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
     proFieldProps?: import("src/utils").ProFieldProps | undefined;
     footerRender?: import("../../typing").LightFilterFooterRender | undefined;
     children?: any;

package/es/form/components/ColorPicker/index.d.ts

@@ -16,7 +16,7 @@ declare const _default: React.ForwardRefExoticComponent<{
     emptyText?: React.ReactNode;
     cacheForSwr?: boolean | undefined;
     disabled?: boolean | undefined;
-    width?: number | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    width?: number | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
     proFieldProps?: import("src/utils").ProFieldProps | undefined;
     footerRender?: import("../../typing").LightFilterFooterRender | undefined;
     children?: any;

package/es/form/components/DatePicker/DateTimePicker.js

@@ -21,6 +21,7 @@ const ProFormDateTimePicker = /*#__PURE__*/React.forwardRef(({
       valueType,
       customLightMode: true
     },
+    fieldProps: fieldProps,
     ...rest
   });
 });

package/es/form/components/DateRangePicker/DateTimeRangePicker.d.ts

@@ -1,4 +1,4 @@
-import { RangePickerProps } from 'antd/lib/date-picker';
+import type { RangePickerProps } from 'antd/lib/date-picker';
 import React from 'react';
 import type { ProFormFieldItemProps } from '../../typing';
 /**

package/es/form/components/DateRangePicker/DateTimeRangePicker.js

@@ -16,9 +16,7 @@ export const ProFormDateTimeRangePicker = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   return /*#__PURE__*/_jsx(BaseDateRanger, {
     ref: ref,
-    fieldProps: {
-      ...fieldProps
-    },
+    fieldProps: fieldProps,
     valueType: valueType,
     proFieldProps: proFieldProps,
     fieldConfig: {

package/es/form/components/Digit/DigitRange.d.ts

@@ -13,7 +13,7 @@ export type ProFormDigitRangeProps = ProFormFieldItemProps<RangeInputNumberProps
     separatorWidth?: number;
 };
 declare const ForwardRefProFormDigit: React.ForwardRefExoticComponent<{
-    fieldProps?: Partial<import("../../typing").FieldProps<any> & Omit<InputNumberProps<number>, "value" | "placeholder" | "onChange" | "defaultValue"> & {
+    fieldProps?: Partial<import("../../typing").FieldProps<any> & Omit<InputNumberProps<number>, "value" | "defaultValue" | "onChange" | "placeholder"> & {
         value?: ValuePair | undefined;
         defaultValue?: ValuePair | undefined;
         onChange?: ((value?: ValuePair) => void) | undefined;
@@ -23,7 +23,7 @@ declare const ForwardRefProFormDigit: React.ForwardRefExoticComponent<{
     emptyText?: React.ReactNode;
     cacheForSwr?: boolean | undefined;
     disabled?: boolean | undefined;
-    width?: number | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    width?: number | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
     proFieldProps?: import("src/utils").ProFieldProps | undefined;
     footerRender?: import("../../typing").LightFilterFooterRender | undefined;
     children?: any;

package/es/form/components/Digit/index.d.ts

@@ -12,7 +12,7 @@ declare const ForwardRefProFormDigit: React.ForwardRefExoticComponent<{
     emptyText?: React.ReactNode;
     cacheForSwr?: boolean | undefined;
     disabled?: boolean | undefined;
-    width?: number | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    width?: number | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
     proFieldProps?: import("src/utils").ProFieldProps | undefined;
     footerRender?: import("../../typing").LightFilterFooterRender | undefined;
     children?: any;

package/es/form/components/Field/index.d.ts

@@ -5,7 +5,6 @@ export type ProFormFieldProps<T = any, FiledProps = Record<string, any>> = ProSc
     mode?: 'edit' | 'read' | 'update';
     isDefaultDom?: boolean;
     ref?: any;
-    plain?: boolean;
     text?: any;
     getFieldProps?: () => Record<string, any>;
     getFormItemProps?: () => Record<string, any>;

package/es/form/components/Field/index.js

@@ -1,6 +1,6 @@
-import React, { memo, useContext, useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { PureProField } from "../../../field";
-import { isDeepEqualReact, runFunction, useRefFunction } from "../../../utils";
+import { runFunction, useRefFunction } from "../../../utils";
 import { EditOrReadOnlyContext } from "../../BaseForm/EditOrReadOnlyContext";
 import warpField from "../FormItem/warpField";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -86,7 +86,5 @@ const BaseProFormField = props => {
     params: propsParams
   });
 };
-const ProFormField = warpField?.( /*#__PURE__*/memo(BaseProFormField, (prevProps, nextProps) => {
-  return isDeepEqualReact(nextProps, prevProps, ['onChange', 'onBlur']);
-}));
+const ProFormField = warpField?.(BaseProFormField);
 export default ProFormField;

package/es/form/components/FormItem/FormItemRender/index.d.ts

@@ -130,6 +130,7 @@ export declare const ProFormItemRender: React.FC<Omit<import("antd").FormItemPro
     dataFormat?: string | undefined;
     lightProps?: import("src/form").LightWrapperProps | undefined;
     proFormFieldKey?: any;
+    fieldProps?: Record<string, any> | undefined;
 } & {
     addonBefore?: React.ReactNode;
     addonAfter?: React.ReactNode;

package/es/form/components/FormItem/Group/index.js

@@ -3,7 +3,7 @@ import { useControlledState } from '@rc-component/util';
 import { ConfigProvider, Space } from 'antd';
 import { clsx } from 'clsx';
 import React, { useCallback, useContext, useMemo } from 'react';
-import { LabelIconTip } from "../../../../utils";
+import { LabelIconTip, useRefFunction } from "../../../../utils";
 import FieldContext from "../../../FieldContext";
 import { useGridHelpers } from "../../../helpers/grid";
 import { useStyle } from "./style";
@@ -34,13 +34,27 @@ const Group = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...props
   };
   const [collapsed, setCollapsedInner] = useControlledState(() => defaultCollapsed || false, props.collapsed);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onCollapseCallback = useRefFunction(c => {
+    props.onCollapse?.(c);
+  });
+
+  /**
+   * 使用 queueMicrotask 延迟回调调用，避免在渲染阶段调用外部回调导致的 React 警告
+   * "Cannot update a component while rendering a different component"
+   */
   const setCollapsed = useCallback(updater => {
     setCollapsedInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      props.onCollapse?.(next);
+      queueMicrotask(() => {
+        onCollapseCallback(next);
+      });
       return next;
     });
-  }, [props.onCollapse]);
+  }, [onCollapseCallback]);
   const {
     getPrefixCls
   } = useContext(ConfigProvider.ConfigContext);

package/es/form/components/FormItem/index.d.ts

@@ -56,6 +56,7 @@ export type ProFormItemProps = FormItemProps & {
     dataFormat?: string;
     lightProps?: LightWrapperProps;
     proFormFieldKey?: any;
+    fieldProps?: Record<string, any>;
 } & WarpFormItemProps;
 declare const ProFormItem: React.FC<ProFormItemProps>;
 export { FormItemProvide };

package/es/form/components/FormItem/index.js

@@ -76,12 +76,23 @@ const WithValueFomFiledProps = formFieldProps => {
   if (! /*#__PURE__*/React.isValidElement(filedChildren)) return /*#__PURE__*/_jsx(_Fragment, {
     children: filedChildren
   });
+
+  // restProps 可能来自 LightWrapper 的 cloneElement（light 模式下传入 variant/fieldProps），需保留以覆盖 filedChildren.props，避免内层控件线框双线
+  const variantFromRest = restProps.variant;
+  const fieldPropsFromRest = restProps.fieldProps;
   return /*#__PURE__*/React.cloneElement(filedChildren, omitUndefined({
     ...restProps,
     [valuePropName]: formFieldProps[valuePropName],
     ...filedChildren.props,
     onChange: finalChange,
-    fieldProps,
+    fieldProps: {
+      ...filedChildren.props?.fieldProps,
+      ...fieldPropsFromRest,
+      ...fieldProps
+    },
+    ...(variantFromRest !== undefined && {
+      variant: variantFromRest
+    }),
     onBlur: isProFormComponent && !isValidElementForFiledChildren && onBlur
   }));
 };
@@ -115,36 +126,8 @@ const WarpFormItem = ({
     if (!addonAfter && !addonBefore) {
       return /*#__PURE__*/_jsx(Form.Item, {
         ...props,
-        //help={typeof help !== 'function' ? help : undefined}
         valuePropName: valuePropName,
-        getValueProps: getValuePropsFunc
-        // @ts-ignore
-        // _internalItemRender={{
-        //   mark: 'pro_table_render',
-        //   render: (
-        //     inputProps: FormItemProps & {
-        //       errors: React.ReactNode[];
-        //       warnings: React.ReactNode[];
-        //     },
-        //     doms: {
-        //       input: JSX.Element;
-        //       errorList: JSX.Element;
-        //       extra: JSX.Element;
-        //     },
-        //   ) => (
-        //     <>
-        //       {doms.input}
-        //       {typeof help === 'function'
-        //         ? help({
-        //             errors: inputProps.errors,
-        //             warnings: inputProps.warnings,
-        //           })
-        //         : doms.errorList}
-        //       {doms.extra}
-        //     </>
-        //   ),
-        // }}
-        ,
+        getValueProps: getValuePropsFunc,
         children: children
       });
     }
@@ -210,6 +193,7 @@ const ProFormItem = props => {
     ignoreFormItem,
     lightProps,
     children: unusedChildren,
+    fieldProps,
     ...rest
   } = props;
   const formListField = useContext(FormListContext);
@@ -263,8 +247,9 @@ const ProFormItem = props => {
     valuePropName: props.valuePropName,
     children: props.children
   }, rest.proFormFieldKey || rest.name?.toString());
+  const lightPropsForWrapper = omitUndefined(lightProps || {});
   const lightDom = noLightFormItem ? children : /*#__PURE__*/_createElement(LightWrapper, {
-    ...lightProps,
+    ...lightPropsForWrapper,
     key: rest.proFormFieldKey || rest.name?.toString(),
     size: size
   }, children);

package/es/form/components/FormItem/warpField.js

@@ -225,6 +225,7 @@ export function warpField(Field, config) {
         convertValue: convertValue,
         lightProps: omitUndefined({
           ...fieldProps,
+          variant: rest.variant ?? fieldProps?.variant,
           valueType,
           bordered,
           allowClear: field?.props?.allowClear ?? allowClear,

package/es/form/components/Money/index.d.ts

@@ -16,7 +16,7 @@ declare const _default: React.ForwardRefExoticComponent<{
     emptyText?: React.ReactNode;
     cacheForSwr?: boolean | undefined;
     disabled?: boolean | undefined;
-    width?: number | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    width?: number | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
     proFieldProps?: import("src/utils").ProFieldProps | undefined;
     footerRender?: import("../../typing").LightFilterFooterRender | undefined;
     children?: any;

package/es/form/components/Radio/index.d.ts

@@ -15,7 +15,7 @@ declare const ProFormRadio: React.ComponentClass<{
     emptyText?: React.ReactNode;
     cacheForSwr?: boolean | undefined;
     disabled?: boolean | undefined;
-    width?: number | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    width?: number | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
     proFieldProps?: import("src/utils/typing").ProFieldProps | undefined;
     footerRender?: import("../../typing").LightFilterFooterRender | undefined;
     children?: any;
@@ -29,7 +29,7 @@ declare const ProFormRadio: React.ComponentClass<{
     emptyText?: React.ReactNode;
     cacheForSwr?: boolean | undefined;
     disabled?: boolean | undefined;
-    width?: number | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    width?: number | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
     proFieldProps?: import("src/utils/typing").ProFieldProps | undefined;
     footerRender?: import("../../typing").LightFilterFooterRender | undefined;
     children?: any;

package/es/form/components/Rate/index.d.ts

@@ -7,7 +7,7 @@ declare const _default: React.ForwardRefExoticComponent<{
     emptyText?: React.ReactNode;
     cacheForSwr?: boolean | undefined;
     disabled?: boolean | undefined;
-    width?: number | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    width?: number | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
     proFieldProps?: import("src/utils").ProFieldProps | undefined;
     footerRender?: import("../../typing").LightFilterFooterRender | undefined;
     children?: any;

package/es/form/components/Slider/index.d.ts

@@ -22,7 +22,7 @@ declare const ProFormSlider: React.ForwardRefExoticComponent<{
     emptyText?: React.ReactNode;
     cacheForSwr?: boolean | undefined;
     disabled?: boolean | undefined;
-    width?: number | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    width?: number | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
     proFieldProps?: import("src/utils").ProFieldProps | undefined;
     footerRender?: import("../../typing").LightFilterFooterRender | undefined;
     children?: any;

package/es/form/components/TextArea/index.d.ts

@@ -8,7 +8,7 @@ declare const _default: React.ForwardRefExoticComponent<{
     emptyText?: React.ReactNode;
     cacheForSwr?: boolean | undefined;
     disabled?: boolean | undefined;
-    width?: number | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    width?: number | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
     proFieldProps?: import("src/utils").ProFieldProps | undefined;
     footerRender?: import("../../typing").LightFilterFooterRender | undefined;
     children?: any;

package/es/form/helpers/grid.d.ts

@@ -1,13 +1,17 @@
-/// <reference types="react" />
 import type { ColProps, RowProps } from 'antd';
+import React from 'react';
 import type { ProFormGridConfig } from '../typing';
-export declare const GridContext: import("react").Context<ProFormGridConfig>;
+export declare const GridContext: React.Context<ProFormGridConfig>;
 interface CommonProps {
     Wrapper?: React.FC<any>;
 }
+interface ColWrapperProps extends ColProps, CommonProps {
+    variant?: string;
+    fieldProps?: Record<string, any>;
+}
 export interface GridHelpers {
     RowWrapper: React.FC<RowProps & CommonProps>;
-    ColWrapper: React.FC<ColProps & CommonProps>;
+    ColWrapper: React.FC<ColWrapperProps>;
     grid: boolean;
 }
 export declare const gridHelpers: (config: ProFormGridConfig & CommonProps) => GridHelpers;

package/es/form/helpers/grid.js

@@ -1,5 +1,5 @@
 import { Col, Row } from 'antd';
-import { createContext, useContext, useMemo } from 'react';
+import React, { createContext, useContext, useMemo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GridContext = /*#__PURE__*/createContext({
   grid: false,
@@ -32,6 +32,8 @@ export const gridHelpers = ({
   ColWrapper({
     children,
     Wrapper,
+    variant,
+    fieldProps,
     ...rest
   } = {}) {
     const props = useMemo(() => {
@@ -49,14 +51,27 @@ export const gridHelpers = ({
       }
       return originProps;
     }, [rest]);
+
+    // LightFilter clone 传入的 variant/fieldProps 需透传给 ProFormItem，否则 lightProps 无 variant
+    const childrenWithProps = (variant !== undefined || fieldProps !== undefined) && React.Children.count(children) === 1 && /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
+      ...(variant !== undefined && {
+        variant
+      }),
+      ...(fieldProps && {
+        fieldProps: {
+          ...children?.props?.fieldProps,
+          ...fieldProps
+        }
+      })
+    }) : children;
     if (!grid) {
       return Wrapper ? /*#__PURE__*/_jsx(Wrapper, {
-        children: children
-      }) : children;
+        children: childrenWithProps
+      }) : childrenWithProps;
     }
     return /*#__PURE__*/_jsx(Col, {
       ...props,
-      children: children
+      children: childrenWithProps
     });
   }
 });

package/es/form/layouts/DrawerForm/index.js

@@ -59,13 +59,27 @@ function DrawerForm({
   const [resizableDrawer, setResizableDrawer] = useState(false);
   const [drawerWidth, setDrawerWidth] = useState(width ? width : resize ? resizeInfo?.minWidth : 800);
   const [open, setOpenInner] = useControlledState(!!propsOpen, propsOpen);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onOpenChangeCallback = useRefFunction(o => {
+    onOpenChange?.(o);
+  });
+
+  /**
+   * 使用 queueMicrotask 延迟回调调用，避免在渲染阶段调用外部回调导致的 React 警告
+   * "Cannot update a component while rendering a different component"
+   */
   const setOpen = useCallback(updater => {
     setOpenInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      onOpenChange?.(next);
+      queueMicrotask(() => {
+        onOpenChangeCallback(next);
+      });
       return next;
     });
-  }, [onOpenChange]);
+  }, [onOpenChangeCallback]);
   const footerRef = useRef(null);
   const footerDomRef = useCallback(element => {
     if (footerRef.current === null && element) {

package/es/form/layouts/LightFilter/index.js

@@ -22,7 +22,7 @@ const LightFilterContainer = props => {
     collapse,
     collapseLabel,
     onValuesChange,
-    variant,
+    variant = 'borderless',
     values,
     footerRender,
     placement,
@@ -77,6 +77,7 @@ const LightFilterContainer = props => {
       });
     }
     return /*#__PURE__*/_jsx(FieldLabel, {
+      variant: variant,
       size: size,
       label: intl.getMessage('form.lightFilter.more', '更多筛选')
     });
@@ -103,7 +104,8 @@ const LightFilterContainer = props => {
           children: /*#__PURE__*/React.cloneElement(child, {
             fieldProps: {
               ...child.props.fieldProps,
-              placement: newPlacement
+              placement: newPlacement,
+              variant: 'borderless'
             },
             // proFieldProps 会直接作为 ProField 的 props 传递过去
             proFieldProps: {
@@ -172,7 +174,8 @@ const LightFilterContainer = props => {
               children: /*#__PURE__*/React.cloneElement(child, {
                 fieldProps: {
                   ...newFieldProps,
-                  placement: newPlacement
+                  placement: newPlacement,
+                  variant
                 }
               })
             }, key);
@@ -223,7 +226,7 @@ function LightFilter(props) {
           return item;
         }),
         size: size,
-        variant: variant,
+        variant: variant || 'borderless',
         collapse: collapse,
         collapseLabel: collapseLabel,
         placement: placement,

package/es/form/layouts/ModalForm/index.js

@@ -3,6 +3,7 @@ import { ConfigProvider, Modal } from 'antd';
 import { merge } from 'lodash-es';
 import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { useRefFunction } from "../../../utils";
 import { BaseForm } from "../../BaseForm";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -29,13 +30,27 @@ function ModalForm({
   const [, forceUpdate] = useState([]);
   const [loading, setLoading] = useState(false);
   const [open, setOpenInner] = useControlledState(false, propsOpen);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onOpenChangeCallback = useRefFunction(o => {
+    onOpenChange?.(o);
+  });
+
+  /**
+   * 使用 queueMicrotask 延迟回调调用，避免在渲染阶段调用外部回调导致的 React 警告
+   * "Cannot update a component while rendering a different component"
+   */
   const setOpen = useCallback(updater => {
     setOpenInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      onOpenChange?.(next);
+      queueMicrotask(() => {
+        onOpenChangeCallback(next);
+      });
       return next;
     });
-  }, [onOpenChange]);
+  }, [onOpenChangeCallback]);
   const footerRef = useRef(null);
   const footerDomRef = useCallback(element => {
     if (footerRef.current === null && element) {

package/es/form/layouts/ProForm/index.d.ts

@@ -14,7 +14,7 @@ declare namespace ProForm {
     var Provider: React.FC<import("antd/es/form/context").FormProviderProps>;
     var useFormInstance: typeof import("antd/es/form/hooks/useFormInstance").default;
     var EditOrReadOnlyContext: React.Context<{
-        mode: "update" | "edit" | "read";
+        mode: "update" | "read" | "edit";
     }>;
 }
 export { ProForm };

package/es/form/layouts/QueryFilter/index.js

@@ -5,7 +5,7 @@ import { Col, ConfigProvider, Form, Row } from 'antd';
 import { clsx } from 'clsx';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { ProProvider, useIntl } from "../../../provider";
-import { isBrowser } from "../../../utils";
+import { isBrowser, useRefFunction } from "../../../utils";
 import { BaseForm } from "../../BaseForm";
 import Actions from "./Actions";
 import { useStyle } from "./style";
@@ -79,13 +79,27 @@ const QueryFilterContent = props => {
   const resetText = props.resetText || intl.getMessage('tableForm.reset', '重置');
   const searchText = props.searchText || intl.getMessage('tableForm.search', '搜索');
   const [collapsed, setCollapsedInner] = useControlledState(() => props.defaultCollapsed && !!props.submitter, props.collapsed);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onCollapseCallback = useRefFunction(c => {
+    props.onCollapse?.(c);
+  });
+
+  /**
+   * 使用 queueMicrotask 延迟回调调用，避免在渲染阶段调用外部回调导致的 React 警告
+   * "Cannot update a component while rendering a different component"
+   */
   const setCollapsed = useCallback(updater => {
     setCollapsedInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      props.onCollapse?.(next);
+      queueMicrotask(() => {
+        onCollapseCallback(next);
+      });
       return next;
     });
-  }, [props.onCollapse]);
+  }, [onCollapseCallback]);
   const {
     optionRender,
     collapseRender,

package/es/form/layouts/StepsForm/index.js

@@ -118,13 +118,27 @@ function StepsForm(props) {
    * 受控的方式来操作表单
    */
   const [step, setStepInner] = useControlledState(0, props.current);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onCurrentChangeCallback = useRefFunction(current => {
+    props.onCurrentChange?.(current);
+  });
+
+  /**
+   * 使用 queueMicrotask 延迟回调调用，避免在渲染阶段调用外部回调导致的 React 警告
+   * "Cannot update a component while rendering a different component"
+   */
   const setStep = useCallback(updater => {
     setStepInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      props.onCurrentChange?.(next);
+      queueMicrotask(() => {
+        onCurrentChangeCallback(next);
+      });
       return next;
     });
-  }, [props.onCurrentChange]);
+  }, [onCurrentChangeCallback]);
   const layoutRender = useMemo(() => {
     return StepsLayoutStrategy[stepsProps?.direction || 'horizontal'];
   }, [stepsProps?.direction]);