Merge branch 'feature' into master-merge-feature

2025-06-07 17:44:35 +08:00 · 2025-05-06 19:17:54 +08:00 · 2025-05-06 19:17:54 +08:00 · afcbb3ff7f
commit afcbb3ff7f
parent c7cf4d12a8 92248806e9
45 changed files with 175 additions and 81 deletions
--- a/.cursor/rules/naming.mdc
+++ b/.cursor/rules/naming.mdc
@ -1,6 +1,6 @@
 ---
-description: 
-globs: 
+description:
+globs:
 alwaysApply: true
 ---
 Basically, antd naming requires **FULL NAME** instead of Abbreviation.
@ -31,7 +31,7 @@ Basically, antd naming requires **FULL NAME** instead of Abbreviation.
  * Multiple icons: `FunctionName` + `Icon`
 * Trigger: `trigger`
  * Sub function trigger: `Sub Function` + `Trigger`
-  * Trigger on the time point: `xxx` + `On` + `EventName` (e.g. `destroyOnClose`)
+  * Trigger on the time point: `xxx` + `On` + `EventName` (e.g. `destroyOnHidden`)
 * Component use other component config. Naming as component.(e.g. `<Table pagination={{...}} />`)
 * ClassName: `className`
  * Additional classes should be merged into `classes` (e.g. `<Button classes={{ inner: 'custom-inner' }} />`)
@ -62,15 +62,15 @@ ComponentRef {
 `variant (optional)` + `semantic part` + `semantic part variant (optional)` + `css property` + `size/disabled (optional)`

 All component tokens should follow the structure above, and should not conflict with Global Token.
-* `variant` means this token only works in certain variant, like `horizontal` `borderless`.  
+* `variant` means this token only works in certain variant, like `horizontal` `borderless`.
 * `semantic part` means the typical element of component, like `item` `header`. If there's.
 * `semantic part status` means the variant of the semantic part before it, like `hover` `selected`.
-* `css property` means the exact property where the token is used, like `fontSize` `width`.  
+* `css property` means the exact property where the token is used, like `fontSize` `width`.

 For example:
 | v4 | v5 | Note |
 | --- | --- | --- |
-| `@menu-item-color` | `itemColor` | Remove the component prefix | 
+| `@menu-item-color` | `itemColor` | Remove the component prefix |
 | `@select-item-selected-bg` | `itemSelectedBg` | `selected` is variant of item |
 | `@select-single-item-height-lg` | `itemHeightLG` | `single` is variant of Select (by default), `LG` is size of Select |

@ -86,13 +86,13 @@ ref: [#16048](mdc:https:/github.com/ant-design/ant-design/issues/16048)
 | Property      | Description                   | Type                           | Default |
 | --------- | ---------------------- | ------------------------------ | ------ |
 | htmlType | xxx        | string                               | `button `      |
-| type          | xxx           | `horizontal ` \| `vertical `  | `horizontal` | 
+| type          | xxx           | `horizontal ` \| `vertical `  | `horizontal` |
 | disabled  | xxx           | boolean                            | false  |
 | minLength      | xxx                         | number                           | 0      |
 |  style      | xxx                    | CSSProperties                  | -   |
 | character | xxx | (props) => ReactNode | - |
 | offset | xxx| \[number, number] | \[0, 0] |
-| value     | xxx         | string \| number | `small`      | 
+| value     | xxx         | string \| number | `small`      |

 ### Promise
 - When string type, the **Default** use ` `` `.
@ -105,4 +105,4 @@ ref: [#16048](mdc:https:/github.com/ant-design/ant-design/issues/16048)
 - No period at the end of the **Description**.
 - API order is arranged in alphabetical order, and can be put together under special circumstances (such as: xs sm md).

-ref: [#25066](mdc:https:/github.com/ant-design/ant-design/issues/25066)
+ref: [#25066](mdc:https:/github.com/ant-design/ant-design/issues/25066)
--- a/.dumi/theme/builtins/ComponentTokenTable/index.tsx
+++ b/.dumi/theme/builtins/ComponentTokenTable/index.tsx
@ -160,7 +160,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = (props) => {
          {title}
          <Popover
            title={null}
-            destroyOnClose
+            destroyOnHidden
            styles={{ root: { width: 400 } }}
            content={
              <Typography>
--- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
+++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
@ -277,7 +277,7 @@ const ComponentChangelog: React.FC<Readonly<React.PropsWithChildren>> = (props)
                {version}
                {bugVersionInfo.match && (
                  <Popover
-                    destroyOnClose
+                    destroyOnHidden
                    placement="right"
                    title={<span className={styles.bugReasonTitle}>{locale.bugList}</span>}
                    content={
@ -327,7 +327,7 @@ const ComponentChangelog: React.FC<Readonly<React.PropsWithChildren>> = (props)
          onClick: () => setShow(true),
        })}
      <Drawer
-        destroyOnClose
+        destroyOnHidden
        className={styles.drawerContent}
        title={locale.changelog}
        extra={
--- a/.dumi/theme/slots/Header/index.tsx
+++ b/.dumi/theme/slots/Header/index.tsx
@ -338,7 +338,7 @@ const Header: React.FC = () => {
      target="_blank"
      rel="noreferrer"
    >
-      <Tooltip title="GitHub" destroyOnClose>
+      <Tooltip title="GitHub" destroyOnHidden>
        <Button type="text" icon={<GithubOutlined />} style={{ fontSize: 16 }} />
      </Tooltip>
    </a>,
--- a/components/avatar/AvatarGroup.tsx
+++ b/components/avatar/AvatarGroup.tsx
@ -127,7 +127,7 @@ const AvatarGroup: React.FC<AvatarGroupProps> = (props) => {
    };

    childrenShow.push(
-      <Popover key="avatar-popover-key" destroyOnClose {...mergeProps}>
+      <Popover key="avatar-popover-key" destroyOnHidden {...mergeProps}>
        <Avatar style={mergeStyle}>{`+${numOfChildren - mergeCount}`}</Avatar>
      </Popover>,
    );
--- a/components/collapse/Collapse.tsx
+++ b/components/collapse/Collapse.tsx
@ -26,7 +26,12 @@ export interface CollapseProps extends Pick<RcCollapseProps, 'items'> {
  defaultActiveKey?: Array<string | number> | string | number;
  /** 手风琴效果 */
  accordion?: boolean;
+  /** @deprecated Please use `destroyOnHidden` instead */
  destroyInactivePanel?: boolean;
+  /**
+   * @since 5.25.0
+   */
+  destroyOnHidden?: boolean;
  onChange?: (key: string[]) => void;
  style?: React.CSSProperties;
  className?: string;
@ -76,6 +81,8 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
    size: customizeSize,
    expandIconPosition = 'start',
    children,
+    destroyInactivePanel,
+    destroyOnHidden,
    expandIcon,
  } = props;

@ -93,6 +100,11 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
      'deprecated',
      '`expandIconPosition` with `left` or `right` is deprecated. Please use `start` or `end` instead.',
    );
+    warning.deprecated(
+      !('destroyInactivePanel' in props),
+      'destroyInactivePanel',
+      'destroyOnHidden',
+    );
  }

  // Align with logic position
@ -185,6 +197,8 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
      prefixCls={prefixCls}
      className={collapseClassName}
      style={{ ...contextStyle, ...style }}
+      // TODO: In the future, destroyInactivePanel in rc-collapse needs to be upgrade to destroyOnHidden
+      destroyInactivePanel={destroyOnHidden ?? destroyInactivePanel}
    >
      {items}
    </RcCollapse>,
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@ -83,7 +83,8 @@ Common props ref：[Common props](/docs/react/common-props)
 | bordered | Toggles rendering of the border around the collapse block | boolean | true |  |
 | collapsible | Specify how to trigger Collapse. Either by clicking icon or by clicking any area in header or disable collapse functionality itself | `header` \| `icon` \| `disabled` | - | 4.9.0 |
 | defaultActiveKey | Key of the initial active panel | string\[] \| string <br/> number\[] \| number | - |  |
-| destroyInactivePanel | Destroy Inactive Panel | boolean | false |  |
+| ~~destroyInactivePanel~~ | Destroy Inactive Panel | boolean | false |  |
+| destroyOnHidden | Destroy Inactive Panel | boolean | false | 5.25.0 |
 | expandIcon | Allow to customize collapse icon | (panelProps) => ReactNode | - |  |
 | expandIconPosition | Set expand icon position | `start` \| `end` | - | 4.21.0 |
 | ghost | Make the collapse borderless and its background transparent | boolean | false | 4.4.0 |
--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@ -84,7 +84,8 @@ const items: CollapseProps['items'] = [
 | bordered | 带边框风格的折叠面板 | boolean | true |  |
 | collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 |
 | defaultActiveKey | 初始化选中面板的 key | string\[] \| string<br/> number\[] \| number | - |  |
-| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | false |  |
+| ~~destroyInactivePanel~~ | 销毁折叠隐藏的面板 | boolean | false |  |
+| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
 | expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - |  |
 | expandIconPosition | 设置图标位置 | `start` \| `end` | - | 4.21.0 |
 | ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
--- a/components/color-picker/ColorPicker.tsx
+++ b/components/color-picker/ColorPicker.tsx
@ -60,7 +60,7 @@ const ColorPicker: CompoundedComponent = (props) => {
    getPopupContainer,
    autoAdjustOverflow = true,
    destroyTooltipOnHide,
-    destroyOnClose,
+    destroyOnHidden,
    disabledFormat,
    ...rest
  } = props;
@ -212,7 +212,7 @@ const ColorPicker: CompoundedComponent = (props) => {
    rootClassName,
    getPopupContainer,
    autoAdjustOverflow,
-    destroyOnClose: destroyOnClose ?? !!destroyTooltipOnHide,
+    destroyOnHidden: destroyOnHidden ?? !!destroyTooltipOnHide,
  };

  const mergedStyle: React.CSSProperties = { ...colorPicker?.style, ...style };
--- a/components/color-picker/index.en-US.md
+++ b/components/color-picker/index.en-US.md
@ -51,7 +51,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | disabledAlpha | Disable Alpha | boolean | - | 5.8.0 |
 | disabledFormat | Disable format of color | boolean | - | |
 | ~~destroyTooltipOnHide~~ | Whether destroy dom when close | `boolean` | false | 5.7.0 |
-| destroyOnClose | Whether destroy dom when close | `boolean` | false | 5.25.0 |
+| destroyOnHidden | Whether destroy dom when close | `boolean` | false | 5.25.0 |
 | format | Format of color | `rgb` \| `hex` \| `hsb` | - | |
 | mode | Configure single or gradient color | `'single' \| 'gradient' \| ('single' \| 'gradient')[]` | `single` | 5.20.0 |
 | open | Whether to show popup | boolean | - | |
--- a/components/color-picker/index.zh-CN.md
+++ b/components/color-picker/index.zh-CN.md
@ -52,7 +52,7 @@ group:
 | disabledAlpha | 禁用透明度 | boolean | - | 5.8.0 |
 | disabledFormat | 禁用选择颜色格式 | boolean | - | |
 | ~~destroyTooltipOnHide~~ | 关闭后是否销毁弹窗 | `boolean` | false | 5.7.0 |
-| destroyOnClose | 关闭后是否销毁弹窗 | `boolean` | false | 5.25.0 |
+| destroyOnHidden | 关闭后是否销毁弹窗 | `boolean` | false | 5.25.0 |
 | format | 颜色格式 | `rgb` \| `hex` \| `hsb` | - | |
 | mode | 选择器模式，用于配置单色与渐变 | `'single' \| 'gradient' \| ('single' \| 'gradient')[]` | `single` | 5.20.0 |
 | open | 是否显示弹出窗口 | boolean | - | |
--- a/components/color-picker/interface.ts
+++ b/components/color-picker/interface.ts
@ -96,5 +96,5 @@ export type ColorPickerProps = Omit<
  disabledFormat?: boolean;
 } & Pick<
    PopoverProps,
-    'getPopupContainer' | 'autoAdjustOverflow' | 'destroyTooltipOnHide' | 'destroyOnClose'
+    'getPopupContainer' | 'autoAdjustOverflow' | 'destroyTooltipOnHide' | 'destroyOnHidden'
  >;
--- a/components/drawer/tests/Drawer.test.tsx
+++ b/components/drawer/tests/Drawer.test.tsx
@ -105,9 +105,9 @@ describe('Drawer', () => {
    expect(wrapper.firstChild).toMatchSnapshot();
  });

-  it('destroyOnClose is true', () => {
+  it('destroyOnHidden is true', () => {
    const { container: wrapper } = render(
-      <Drawer destroyOnClose open={false} getContainer={false}>
+      <Drawer destroyOnHidden open={false} getContainer={false}>
        Here is content of Drawer
      </Drawer>,
    );
@ -118,7 +118,7 @@ describe('Drawer', () => {

  it('className is test_drawer', () => {
    const { container: wrapper } = render(
-      <Drawer destroyOnClose open rootClassName="test_drawer" getContainer={false}>
+      <Drawer destroyOnHidden open rootClassName="test_drawer" getContainer={false}>
        Here is content of Drawer
      </Drawer>,
    );
--- a/components/drawer/tests/DrawerEvent.test.tsx
+++ b/components/drawer/tests/DrawerEvent.test.tsx
@ -56,11 +56,11 @@ describe('Drawer', () => {
    expect(onClose).not.toHaveBeenCalled();
  });

-  it('dom should be removed after close when destroyOnClose is true', () => {
-    const { container, rerender } = render(<DrawerTest destroyOnClose />);
+  it('dom should be removed after close when destroyOnHidden is true', () => {
+    const { container, rerender } = render(<DrawerTest destroyOnHidden />);
    expect(container.querySelector('.ant-drawer')).toBeTruthy();

-    rerender(<DrawerTest destroyOnClose open={false} />);
+    rerender(<DrawerTest destroyOnHidden open={false} />);
    act(() => {
      jest.runAllTimers();
    });
@ -68,7 +68,7 @@ describe('Drawer', () => {
    expect(container.querySelector('.ant-drawer')).toBeFalsy();
  });

-  it('dom should be existed after close when destroyOnClose is false', () => {
+  it('dom should be existed after close when destroyOnHidden is false', () => {
    const { container, rerender } = render(<DrawerTest />);
    expect(container.querySelector('.ant-drawer')).toBeTruthy();

--- a/components/drawer/tests/snapshots/Drawer.test.tsx.snap
+++ b/components/drawer/tests/snapshots/Drawer.test.tsx.snap
@ -203,7 +203,7 @@ exports[`Drawer closable is false 1`] = `
 </div>
 `;

-exports[`Drawer destroyOnClose is true 1`] = `null`;
+exports[`Drawer destroyOnHidden is true 1`] = `null`;

 exports[`Drawer getContainer return undefined 1`] = `<div />`;

--- a/components/drawer/demo/loading.tsx
+++ b/components/drawer/demo/loading.tsx
@ -22,7 +22,7 @@ const App: React.FC = () => {
      </Button>
      <Drawer
        closable
-        destroyOnClose
+        destroyOnHidden
        title={<p>Loading Drawer</p>}
        placement="right"
        open={open}
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@ -56,7 +56,8 @@ v5 uses `rootClassName` & `rootStyle` to configure the outermost element style,
 | className | Config Drawer Panel className. Use `rootClassName` if want to config top DOM style | string | - |  |
 | classNames | Semantic structure className | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.10.0 |
 | closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | ReactNode | &lt;CloseOutlined /> |  |
-| destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false |  |
+| ~~destroyOnClose~~ | Whether to unmount child components on closing drawer or not | boolean | false |  |
+| destroyOnHidden | Whether to unmount child components on closing drawer or not | boolean | false | 5.25.0 |
 | extra | Extra actions area at corner | ReactNode | - | 4.17.0 |
 | footer | The footer for Drawer | ReactNode | - |  |
 | forceRender | Pre-render Drawer component forcibly | boolean | false |  |
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@ -26,7 +26,7 @@ export interface PushState {

 // Drawer diff props: 'open' | 'motion' | 'maskMotion' | 'wrapperClassName'
 export interface DrawerProps
-  extends Omit<RcDrawerProps, 'maskStyle'>,
+  extends Omit<RcDrawerProps, 'maskStyle' | 'destroyOnClose'>,
    Omit<DrawerPanelProps, 'prefixCls'> {
  size?: sizeType;

@ -41,6 +41,12 @@ export interface DrawerProps
  afterVisibleChange?: (open: boolean) => void;
  classNames?: DrawerClassNames;
  styles?: DrawerStyles;
+  /** @deprecated Please use `destroyOnHidden` instead */
+  destroyOnClose?: boolean;
+  /**
+   * @since 5.25.0
+   */
+  destroyOnHidden?: boolean;
 }

 const defaultPushState: PushState = { distance: 180 };
@ -69,7 +75,8 @@ const Drawer: React.FC<DrawerProps> & {
    maskStyle,
    drawerStyle,
    contentWrapperStyle,
-
+    destroyOnClose,
+    destroyOnHidden,
    ...rest
  } = props;

@ -116,6 +123,7 @@ const Drawer: React.FC<DrawerProps> & {
      ['contentWrapperStyle', 'styles.wrapper'],
      ['maskStyle', 'styles.mask'],
      ['drawerStyle', 'styles.content'],
+      ['destroyInactivePanel', 'destroyOnHidden'],
    ].forEach(([deprecatedName, newName]) => {
      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
    });
@ -210,6 +218,8 @@ const Drawer: React.FC<DrawerProps> & {
          afterOpenChange={afterOpenChange ?? afterVisibleChange}
          panelRef={panelRef}
          zIndex={zIndex}
+          // TODO: In the future, destroyOnClose in rc-drawer needs to be upgrade to destroyOnHidden
+          destroyOnClose={destroyOnHidden ?? destroyOnClose}
        >
          <DrawerPanel prefixCls={prefixCls} {...rest} onClose={onClose} />
        </RcDrawer>
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@ -56,7 +56,8 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
 | className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - |  |
 | classNames | 语义化结构 className | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.10.0 |
 | closeIcon | 自定义关闭图标。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | ReactNode | &lt;CloseOutlined /> |  |
-| destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false |  |
+| ~~destroyOnClose~~ | 关闭时销毁 Drawer 里的子元素 | boolean | false |  |
+| destroyOnHidden | 关闭时销毁 Drawer 里的子元素 | boolean | false | 5.25.0 |
 | extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
 | footer | 抽屉的页脚 | ReactNode | - |  |
 | forceRender | 预渲染 Drawer 内元素 | boolean | false |  |
--- a/components/dropdown/tests/dropdown-button.test.tsx
+++ b/components/dropdown/tests/dropdown-button.test.tsx
@ -181,7 +181,7 @@ describe('DropdownButton', () => {
      </DropdownButton>,
    );
    expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Dropdown] `destroyPopupOnHide` is deprecated. Please use `destroyOnClose` instead.',
+      'Warning: [antd: Dropdown] `destroyPopupOnHide` is deprecated. Please use `destroyOnHidden` instead.',
    );
    errorSpy.mockRestore();
  });
--- a/components/dropdown/tests/index.test.tsx
+++ b/components/dropdown/tests/index.test.tsx
@ -291,7 +291,7 @@ describe('Dropdown', () => {
      'Warning: [antd: Dropdown] `dropdownRender` is deprecated. Please use `popupRender` instead.',
    );
    expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Dropdown] `destroyPopupOnHide` is deprecated. Please use `destroyOnClose` instead.',
+      'Warning: [antd: Dropdown] `destroyPopupOnHide` is deprecated. Please use `destroyOnHidden` instead.',
    );

    expect(dropdownRender).toHaveBeenCalled();
--- a/components/dropdown/dropdown-button.tsx
+++ b/components/dropdown/dropdown-button.tsx
@ -67,7 +67,7 @@ const DropdownButton: CompoundedComponent = (props) => {
    mouseLeaveDelay,
    overlayClassName,
    overlayStyle,
-    destroyOnClose,
+    destroyOnHidden,
    destroyPopupOnHide,
    dropdownRender,
    popupRender,
@ -92,7 +92,7 @@ const DropdownButton: CompoundedComponent = (props) => {
    mouseLeaveDelay,
    overlayClassName,
    overlayStyle,
-    destroyOnClose,
+    destroyOnHidden,
    popupRender: mergedPopupRender,
  };

--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@ -55,12 +55,12 @@ export interface DropdownProps {
  onOpenChange?: (open: boolean, info: { source: 'trigger' | 'menu' }) => void;
  open?: boolean;
  disabled?: boolean;
-  /** @deprecated Please use `destroyOnClose` instead */
+  /** @deprecated Please use `destroyOnHidden` instead */
  destroyPopupOnHide?: boolean;
  /**
   * @since 5.25.0
   */
-  destroyOnClose?: boolean;
+  destroyOnHidden?: boolean;
  align?: AlignType;
  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  prefixCls?: string;
@ -115,7 +115,7 @@ const Dropdown: CompoundedComponent = (props) => {
    placement = '',
    overlay,
    transitionName,
-    destroyOnClose,
+    destroyOnHidden,
    destroyPopupOnHide,
  } = props;

@ -137,7 +137,7 @@ const Dropdown: CompoundedComponent = (props) => {
      onVisibleChange: 'onOpenChange',
      overlay: 'menu',
      dropdownRender: 'popupRender',
-      destroyPopupOnHide: 'destroyOnClose',
+      destroyPopupOnHide: 'destroyOnHidden',
    };

    Object.entries(deprecatedProps).forEach(([deprecatedName, newName]) => {
@ -311,7 +311,7 @@ const Dropdown: CompoundedComponent = (props) => {
      placement={memoPlacement}
      onVisibleChange={onInnerOpenChange}
      overlayStyle={{ ...dropdown?.style, ...overlayStyle, zIndex }}
-      autoDestroy={destroyOnClose ?? destroyPopupOnHide}
+      autoDestroy={destroyOnHidden ?? destroyPopupOnHide}
    >
      {popupTrigger}
    </RcDropdown>
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@ -48,8 +48,8 @@ Common props ref：[Common props](/docs/react/common-props)
 | autoAdjustOverflow | Whether to adjust dropdown placement automatically when dropdown is off screen | boolean | true | 5.2.0 |
 | autoFocus | Focus element in `overlay` when opened | boolean | false | 4.21.0 |
 | disabled | Whether the dropdown menu is disabled | boolean | - |  |
-| ~~destroyPopupOnHide~~ | Whether destroy dropdown when hidden, use `destroyOnClose` instead | boolean | false |  |
-| destroyOnClose | Whether destroy dropdown when hidden | boolean | false | 5.25.0 |
+| ~~destroyPopupOnHide~~ | Whether destroy dropdown when hidden, use `destroyOnHidden` instead | boolean | false |  |
+| destroyOnHidden | Whether destroy dropdown when hidden | boolean | false | 5.25.0 |
 | ~~dropdownRender~~ | Customize dropdown content, use `popupRender` instead | (menus: ReactNode) => ReactNode | - | 4.24.0 |
 | popupRender | Customize popup content | (menus: ReactNode) => ReactNode | - | 5.25.0 |
 | getPopupContainer | To set the container of the dropdown menu. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body |  |
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@ -52,8 +52,8 @@ demo:
 | autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean | true | 5.2.0 |
 | autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
 | disabled | 菜单是否禁用 | boolean | - |  |
-| ~~destroyPopupOnHide~~ | 关闭后是否销毁 Dropdown，使用 `destroyOnClose` 替换 | boolean | false |  |
-| destroyOnClose | 关闭后是否销毁 Dropdown | boolean | false | 5.25.0 |
+| ~~destroyPopupOnHide~~ | 关闭后是否销毁 Dropdown，使用 `destroyOnHidden` 替换 | boolean | false |  |
+| destroyOnHidden | 关闭后是否销毁 Dropdown | boolean | false | 5.25.0 |
 | ~~dropdownRender~~ | 自定义下拉框内容，使用 `popupRender` 替换 | (menus: ReactNode) => ReactNode | - | 4.24.0 |
 | popupRender | 自定义弹出框内容 | (menus: ReactNode) => ReactNode | - | 5.25.0 |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body |  |
--- a/components/form/demo/form-in-modal.tsx
+++ b/components/form/demo/form-in-modal.tsx
@ -31,7 +31,7 @@ const App: React.FC = () => {
        cancelText="Cancel"
        okButtonProps={{ autoFocus: true, htmlType: 'submit' }}
        onCancel={() => setOpen(false)}
-        destroyOnClose
+        destroyOnHidden
        modalRender={(dom) => (
          <Form
            layout="vertical"
--- a/components/image/demo/imageRender.tsx
+++ b/components/image/demo/imageRender.tsx
@ -5,7 +5,7 @@ const App: React.FC = () => (
  <Image
    width={200}
    preview={{
-      destroyOnClose: true,
+      destroyOnHidden: true,
      imageRender: () => (
        <video
          muted
--- a/components/image/index.en-US.md
+++ b/components/image/index.en-US.md
@ -68,7 +68,8 @@ Other attributes [&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El
 | forceRender | Force render preview dialog | boolean | - | - |
 | toolbarRender | Custom toolbar render | (originalNode: React.ReactElement, info: Omit<[ToolbarRenderInfoType](#toolbarrenderinfotype), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0, `info.image`: 5.18.0 |
 | imageRender | Custom preview content | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype), image: [ImgInfo](#imginfo) }) => React.ReactNode | - | 5.7.0, image: 5.18.0 |
-| destroyOnClose | Destroy child elements when closing preview | boolean | false |  |
+| ~~destroyOnClose~~ | Destroy child elements when closing preview | boolean | false |  |
+| destroyOnHidden | Destroy child elements when closing preview | boolean | false | 5.25.0 |
 | onTransform | Callback when the transform of image changed | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | 5.7.0 |
 | onVisibleChange | Callback when `visible` changed | (visible: boolean, prevVisible: boolean) => void | - | - |

--- a/components/image/index.tsx
+++ b/components/image/index.tsx
@ -2,10 +2,11 @@ import * as React from 'react';
 import EyeOutlined from '@ant-design/icons/EyeOutlined';
 import classNames from 'classnames';
 import RcImage from 'rc-image';
-import type { ImageProps } from 'rc-image';
+import type { ImagePreviewType, ImageProps as RcImageProps } from 'rc-image';

 import { useZIndex } from '../_util/hooks/useZIndex';
 import { getTransitionName } from '../_util/motion';
+import { devUseWarning } from '../_util/warning';
 import { useComponentConfig } from '../config-provider/context';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import { useLocale } from '../locale';
@ -16,6 +17,19 @@ export interface CompositionImage<P> extends React.FC<P> {
  PreviewGroup: typeof PreviewGroup;
 }

+type Replace<T, K extends keyof T, V> = Partial<Omit<T, K> & { [P in K]: V }>;
+
+interface PreviewType extends Omit<ImagePreviewType, 'destroyOnClose'> {
+  /** @deprecated Please use destroyOnHidden instead */
+  destroyOnClose?: boolean;
+  /**
+   * @since 5.25.0
+   */
+  destroyOnHidden?: boolean;
+}
+
+type ImageProps = Replace<RcImageProps, 'preview', boolean | PreviewType>;
+
 const Image: CompositionImage<ImageProps> = (props) => {
  const {
    prefixCls: customizePrefixCls,
@ -25,6 +39,16 @@ const Image: CompositionImage<ImageProps> = (props) => {
    style,
    ...otherProps
  } = props;
+
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Image');
+    warning.deprecated(
+      !(preview && typeof preview === 'object' && 'destroyOnClose' in preview),
+      'destroyOnClose',
+      'destroyOnHidden',
+    );
+  }
+
  const {
    getPrefixCls,
    getPopupContainer: getContextPopupContainer,
@ -51,12 +75,19 @@ const Image: CompositionImage<ImageProps> = (props) => {
    typeof preview === 'object' ? preview.zIndex : undefined,
  );

-  const mergedPreview = React.useMemo<ImageProps['preview']>(() => {
+  const mergedPreview = React.useMemo<RcImageProps['preview']>(() => {
    if (preview === false) {
      return preview;
    }
    const _preview = typeof preview === 'object' ? preview : {};
-    const { getContainer, closeIcon, rootClassName, ...restPreviewProps } = _preview;
+    const {
+      getContainer,
+      closeIcon,
+      rootClassName,
+      destroyOnClose,
+      destroyOnHidden,
+      ...restPreviewProps
+    } = _preview;
    return {
      mask: (
        <div className={`${prefixCls}-mask-info`}>
@ -66,6 +97,8 @@ const Image: CompositionImage<ImageProps> = (props) => {
      ),
      icons,
      ...restPreviewProps,
+      // TODO: In the future, destroyOnClose in rc-image needs to be upgrade to destroyOnHidden
+      destroyOnClose: destroyOnHidden ?? destroyOnClose,
      rootClassName: classNames(mergedRootClassName, rootClassName),
      getContainer: getContainer ?? getContextPopupContainer,
      transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
--- a/components/image/index.zh-CN.md
+++ b/components/image/index.zh-CN.md
@ -69,7 +69,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
 | forceRender | 强制渲染预览图 | boolean | - | - |
 | toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: Omit<[ToolbarRenderInfoType](#toolbarrenderinfotype), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0, `info.image`: 5.18.0 |
 | imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype), image: [ImgInfo](#imginfo) }) => React.ReactNode | - | 5.7.0, image: 5.18.0 |
-| destroyOnClose | 关闭预览时销毁子元素 | boolean | false |  |
+| ~~destroyOnClose~~ | 关闭预览时销毁子元素 | boolean | false |  |
+| destroyOnHidden | 关闭预览时销毁子元素 | boolean | false | 5.25.0 |
 | onTransform | 预览图 transform 变化的回调 | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | 5.7.0 |
 | onVisibleChange | 当 `visible` 发生改变时的回调 | (visible: boolean, prevVisible: boolean) => void | - | - |

--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@ -64,6 +64,8 @@ const Modal: React.FC<ModalProps> = (props) => {
    mousePosition: customizeMousePosition,
    onOk,
    onCancel,
+    destroyOnHidden,
+    destroyOnClose,
    ...restProps
  } = props;

@ -92,6 +94,7 @@ const Modal: React.FC<ModalProps> = (props) => {
      ['visible', 'open'],
      ['bodyStyle', 'styles.body'],
      ['maskStyle', 'styles.mask'],
+      ['destroyOnClose', 'destroyOnHidden'],
    ].forEach(([deprecatedName, newName]) => {
      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
    });
@ -187,6 +190,8 @@ const Modal: React.FC<ModalProps> = (props) => {
          }}
          styles={{ ...modalContext?.styles, ...modalStyles }}
          panelRef={panelRef}
+          // TODO: In the future, destroyOnClose in rc-dialog needs to be upgrade to destroyOnHidden
+          destroyOnClose={destroyOnHidden ?? destroyOnClose}
        >
          {loading ? (
            <Skeleton
--- a/components/modal/demo/nested.tsx
+++ b/components/modal/demo/nested.tsx
@ -37,7 +37,7 @@ const Demo: React.FC = () => {
        title="Basic Modal"
        open={isModalOpen}
        footer={null}
-        destroyOnClose
+        destroyOnHidden
        onCancel={() => setIsModalOpen(false)}
        maskClosable={false}
        closable={false}
@ -52,7 +52,7 @@ const Demo: React.FC = () => {
          title="Nested Modal"
          open={isModalOpen}
          footer={null}
-          destroyOnClose
+          destroyOnHidden
          mask={false}
          onCancel={() => setIsModalOpen(false)}
          maskClosable={false}
@ -73,7 +73,7 @@ const Demo: React.FC = () => {
            title="Nested Modal"
            open={isModalOpen}
            footer={null}
-            destroyOnClose
+            destroyOnHidden
            mask={false}
            maskClosable={false}
            onCancel={() => setIsModalOpen(false)}
--- a/components/modal/index.en-US.md
+++ b/components/modal/index.en-US.md
@ -56,7 +56,8 @@ Common props ref：[Common props](/docs/react/common-props)
 | closable | Whether a close (x) button is visible on top right or not | boolean \| { closeIcon?: React.ReactNode; disabled?: boolean; } | true |  |
 | closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | ReactNode | &lt;CloseOutlined /> |  |
 | confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false |  |
-| destroyOnClose | Whether to unmount child components on onClose | boolean | false |  |
+| ~~destroyOnClose~~ | Whether to unmount child components on onClose | boolean | false |  |
+| destroyOnHidden | Whether to unmount child components on onClose | boolean | false | 5.25.0 |
 | focusTriggerAfterClose | Whether need to focus trigger element after dialog is closed | boolean | true | 4.9.0 |
 | footer | Footer content, set as `footer={null}` when you don't need default buttons | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | (OK and Cancel buttons) | renderFunction: 5.9.0 |
 | forceRender | Force render Modal | boolean | false |  |
@ -81,8 +82,8 @@ Common props ref：[Common props](/docs/react/common-props)

 #### Note

- The state of Modal will be preserved at it's component lifecycle by default, if you wish to open it with a brand new state every time, set `destroyOnClose` on it.
- There is a situation that using `<Modal />` with Form, which won't clear fields value when closing Modal even you have set `destroyOnClose`. You need `<Form preserve={false} />` in this case.
+- The state of Modal will be preserved at it's component lifecycle by default, if you wish to open it with a brand new state every time, set `destroyOnHidden` on it.
+- There is a situation that using `<Modal />` with Form, which won't clear fields value when closing Modal even you have set `destroyOnHidden`. You need `<Form preserve={false} />` in this case.
 - `Modal.method()` RTL mode only supports hooks.

 ### Modal.method()
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@ -57,7 +57,8 @@ demo:
 | closable | 是否显示右上角的关闭按钮 | boolean \| { closeIcon?: React.ReactNode; disabled?: boolean; } | true |  |
 | closeIcon | 自定义关闭图标。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | ReactNode | &lt;CloseOutlined /> |  |
 | confirmLoading | 确定按钮 loading | boolean | false |  |
-| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false |  |
+| ~~destroyOnClose~~ | 关闭时销毁 Modal 里的子元素 | boolean | false |  |
+| destroyOnHidden | 关闭时销毁 Modal 里的子元素 | boolean | false | 5.25.0 |
 | focusTriggerAfterClose | 对话框关闭后是否需要聚焦触发元素 | boolean | true | 4.9.0 |
 | footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | (确定取消按钮) | renderFunction: 5.9.0 |
 | forceRender | 强制渲染 Modal | boolean | false |  |
@ -82,8 +83,8 @@ demo:

 #### 注意

- `<Modal />` 默认关闭后状态不会自动清空，如果希望每次打开都是新内容，请设置 `destroyOnClose`。
- `<Modal />` 和 Form 一起配合使用时，设置 `destroyOnClose` 也不会在 Modal 关闭时销毁表单字段数据，需要设置 `<Form preserve={false} />`。
+- `<Modal />` 默认关闭后状态不会自动清空，如果希望每次打开都是新内容，请设置 `destroyOnHidden`。
+- `<Modal />` 和 Form 一起配合使用时，设置 `destroyOnHidden` 也不会在 Modal 关闭时销毁表单字段数据，需要设置 `<Form preserve={false} />`。
 - `Modal.method()` RTL 模式仅支持 hooks 用法。

 ### Modal.method()
--- a/components/modal/interface.ts
+++ b/components/modal/interface.ts
@ -44,7 +44,12 @@ export interface ModalProps extends ModalCommonProps {
  forceRender?: boolean;
  okButtonProps?: ButtonProps;
  cancelButtonProps?: ButtonProps;
+  /** @deprecated Please use `destroyOnHidden` instead */
  destroyOnClose?: boolean;
+  /**
+   * @since 5.25.0
+   */
+  destroyOnHidden?: boolean;
  style?: React.CSSProperties;
  wrapClassName?: string;
  maskTransitionName?: string;
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@ -63,7 +63,8 @@ Common props ref：[Common props](/docs/react/common-props)
 | tabBarGutter | The gap between tabs | number | - |  |
 | tabBarStyle | Tab bar style object | CSSProperties | - |  |
 | tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` |  |
-| destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false |  |
+| ~~destroyInactiveTabPane~~ | Whether destroy inactive TabPane when change tab | boolean | false |  |
+| destroyOnHidden | Whether destroy inactive TabPane when change tab | boolean | false | 5.25.0 |
 | type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` |  |
 | onChange | Callback executed when active tab is changed | (activeKey: string) => void | - |  |
 | onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (action === 'add' ? event : targetKey, action) => void | - |  |
--- a/components/tabs/index.tsx
+++ b/components/tabs/index.tsx
@ -24,7 +24,7 @@ export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';

 export type { TabPaneProps };

-export interface TabsProps extends Omit<RcTabsProps, 'editable'> {
+export interface TabsProps extends Omit<RcTabsProps, 'editable' | 'destroyInactiveTabPane'> {
  rootClassName?: string;
  type?: TabsType;
  size?: SizeType;
@ -38,6 +38,13 @@ export interface TabsProps extends Omit<RcTabsProps, 'editable'> {
  children?: React.ReactNode;
  /** @deprecated Please use `indicator={{ size: ... }}` instead */
  indicatorSize?: GetIndicatorSize;
+
+  /** @deprecated Please use `destroyOnHidden` instead */
+  destroyInactiveTabPane?: boolean;
+  /**
+   * @since 5.25.0
+   */
+  destroyOnHidden?: boolean;
 }

 const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
@ -60,6 +67,8 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
    style,
    indicatorSize,
    indicator,
+    destroyInactiveTabPane,
+    destroyOnHidden,
    ...otherProps
  } = props;
  const { prefixCls: customizePrefixCls } = otherProps;
@ -95,6 +104,12 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
      'deprecated',
      '`indicatorSize` has been deprecated. Please use `indicator={{ size: ... }}` instead.',
    );
+
+    warning.deprecated(
+      !('destroyInactiveTabPane' in props),
+      'destroyInactiveTabPane',
+      'destroyOnHidden',
+    );
  }

  const size = useSize(customSize);
@ -141,6 +156,8 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
      prefixCls={prefixCls}
      animated={mergedAnimated}
      indicator={mergedIndicator}
+      // TODO: In the future, destroyInactiveTabPane in rc-tabs needs to be upgrade to destroyOnHidden
+      destroyInactiveTabPane={destroyOnHidden ?? destroyInactiveTabPane}
    />,
  );
 };
--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@ -65,7 +65,8 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | tabBarGutter | tabs 之间的间隙 | number | - |  |
 | tabBarStyle | tab bar 的样式对象 | CSSProperties | - |  |
 | tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` |  |
-| destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false |  |
+| ~~destroyInactiveTabPane~~ | 被隐藏时是否销毁 DOM 结构 | boolean | false |  |
+| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
 | type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` |  |
 | onChange | 切换面板的回调 | (activeKey: string) => void | - |  |
 | onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (action === 'add' ? event : targetKey, action) => void | - |  |
--- a/components/tooltip/tests/tooltip.test.tsx
+++ b/components/tooltip/tests/tooltip.test.tsx
@ -544,7 +544,7 @@ describe('Tooltip', () => {
      </Tooltip>,
    );
    expect(errSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Tooltip] `destroyTooltipOnHide` is deprecated. Please use `destroyOnClose` instead.',
+      'Warning: [antd: Tooltip] `destroyTooltipOnHide` is deprecated. Please use `destroyOnHidden` instead.',
    );

    // Event Trigger
--- a/components/tooltip/demo/destroy-on-close.md
+++ b/components/tooltip/demo/destroy-on-close.md
@ -1,7 +1,7 @@
 ## zh-CN

-通过 `destroyOnClose` 控制提示关闭时是否销毁 dom 节点。
+通过 `destroyOnHidden` 控制提示关闭时是否销毁 dom 节点。

 ## en-US

-Setting `destroyOnClose` to control whether destroy dom node of tooltip when hidden.
+Setting `destroyOnHidden` to control whether destroy dom node of tooltip when hidden.
--- a/components/tooltip/demo/destroy-on-close.tsx
+++ b/components/tooltip/demo/destroy-on-close.tsx
@ -2,7 +2,7 @@ import React from 'react';
 import { Tooltip } from 'antd';

 const App: React.FC = () => (
-  <Tooltip destroyOnClose title="prompt text">
+  <Tooltip destroyOnHidden title="prompt text">
    <span>Dom will destroyed when Tooltip close</span>
  </Tooltip>
 );
--- a/components/tooltip/index.tsx
+++ b/components/tooltip/index.tsx
@ -115,12 +115,12 @@ export interface AbstractTooltipProps extends LegacyTooltipProps {
  autoAdjustOverflow?: boolean | AdjustOverflow;
  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  children?: React.ReactNode;
-  /** @deprecated Please use `destroyOnClose` instead */
+  /** @deprecated Please use `destroyOnHidden` instead */
  destroyTooltipOnHide?: boolean | { keepParent?: boolean };
  /**
   * @since 5.25.0
   */
-  destroyOnClose?: boolean;
+  destroyOnHidden?: boolean;
 }

 export interface TooltipPropsWithOverlay extends AbstractTooltipProps {
@ -146,7 +146,7 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
    afterOpenChange,
    afterVisibleChange,
    destroyTooltipOnHide,
-    destroyOnClose,
+    destroyOnHidden,
    arrow = true,
    title,
    overlay,
@ -206,7 +206,7 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
      ['defaultVisible', 'defaultOpen'],
      ['onVisibleChange', 'onOpenChange'],
      ['afterVisibleChange', 'afterOpenChange'],
-      ['destroyTooltipOnHide', 'destroyOnClose'],
+      ['destroyTooltipOnHide', 'destroyOnHidden'],
      ['arrowPointAtCenter', 'arrow={{ pointAtCenter: true }}'],
      ['overlayStyle', 'styles={{ root: {} }}'],
      ['overlayInnerStyle', 'styles={{ body: {} }}'],
@ -359,8 +359,8 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
        motionName: getTransitionName(rootPrefixCls, 'zoom-big-fast', props.transitionName),
        motionDeadline: 1000,
      }}
-      // TODO: 未来需要把 rc-tooltip 里面的 destroyTooltipOnHide 统一成 destroyOnClose
-      destroyTooltipOnHide={destroyOnClose ?? !!destroyTooltipOnHide}
+      // TODO: In the future, destroyTooltipOnHide in rc-tooltip needs to be upgrade to destroyOnHidden
+      destroyTooltipOnHide={destroyOnHidden ?? !!destroyTooltipOnHide}
    >
      {tempOpen ? cloneElement(child, { className: childCls }) : child}
    </RcTooltip>
--- a/components/tooltip/shared/sharedProps.en-US.md
+++ b/components/tooltip/shared/sharedProps.en-US.md
@ -9,7 +9,7 @@
 | color | The background color | string | - | 4.3.0 |
 | defaultOpen | Whether the floating tooltip card is open by default | boolean | false | 4.23.0 |
 | ~~destroyTooltipOnHide~~ | Whether destroy dom when close | boolean | false |  |
-| destroyOnClose | Whether destroy dom when close | boolean | false | 5.25.0 |
+| destroyOnHidden | Whether destroy dom when close | boolean | false | 5.25.0 |
 | fresh | Tooltip will cache content when it is closed by default. Setting this property will always keep updating | boolean | false | 5.10.0 |
 | getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body` | (triggerNode: HTMLElement) => HTMLElement | () => document.body |  |
 | mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0.1 |  |
--- a/components/tooltip/shared/sharedProps.zh-CN.md
+++ b/components/tooltip/shared/sharedProps.zh-CN.md
@ -9,7 +9,7 @@
 | color | 背景颜色 | string | - | 4.3.0 |
 | defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
 | ~~destroyTooltipOnHide~~ | 关闭后是否销毁 dom | boolean | false |  |
-| destroyOnClose | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
+| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
 | fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
 | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body |  |
 | mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 |  |
--- a/components/watermark/demo/portal.tsx
+++ b/components/watermark/demo/portal.tsx
@ -35,7 +35,7 @@ const App: React.FC = () => {
      </Flex>
      <Watermark content="Ant Design">
        <Modal
-          destroyOnClose
+          destroyOnHidden
          open={showModal}
          title="Modal"
          onCancel={closeModal}
@ -43,12 +43,12 @@ const App: React.FC = () => {
        >
          {placeholder}
        </Modal>
-        <Drawer destroyOnClose open={showDrawer} title="Drawer" onClose={closeDrawer}>
+        <Drawer destroyOnHidden open={showDrawer} title="Drawer" onClose={closeDrawer}>
          {placeholder}
        </Drawer>
      </Watermark>
      <Watermark content="Ant Design" inherit={false}>
-        <Drawer destroyOnClose open={showDrawer2} title="Drawer" onClose={closeDrawer2}>
+        <Drawer destroyOnHidden open={showDrawer2} title="Drawer" onClose={closeDrawer2}>
          {placeholder}
        </Drawer>
      </Watermark>