Merge branch 'feature' into master-merge-feature

.cursor/rules/naming.mdc

@@ -1,6 +1,6 @@
 ---
-description: 
+description:
-globs: 
+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)

.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>

.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={

.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>,

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>,
     );

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>,

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 |

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 |

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 };

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 | - | |

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 | - | |

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'
   >;

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>,
     );

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', () => {
+  it('dom should be removed after close when destroyOnHidden is true', () => {
-    const { container, rerender } = render(<DrawerTest destroyOnClose />);
+    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();
 

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 />`;
 

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}

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 |  |

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>

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 |  |

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();
   });

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();

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,
   };
 

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>

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 |  |
+| ~~destroyPopupOnHide~~ | Whether destroy dropdown when hidden, use `destroyOnHidden` instead | boolean | false |  |
-| destroyOnClose | Whether destroy dropdown when hidden | boolean | false | 5.25.0 |
+| 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 |  |

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 |  |
+| ~~destroyPopupOnHide~~ | 关闭后是否销毁 Dropdown，使用 `destroyOnHidden` 替换 | boolean | false |  |
-| destroyOnClose | 关闭后是否销毁 Dropdown | boolean | false | 5.25.0 |
+| 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 |  |

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"

components/image/demo/imageRender.tsx

@@ -5,7 +5,7 @@ const App: React.FC = () => (
   <Image
     width={200}
     preview={{
-      destroyOnClose: true,
+      destroyOnHidden: true,
       imageRender: () => (
         <video
           muted

components/image/index.en-US.md

@@ -68,7 +68,8 @@ Other attributes [<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 | - | - |
 

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),

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 | - | - |
 

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

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)}

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 | <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.
+- 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 `destroyOnClose`. You need `<Form preserve={false} />` in this case.
+- 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()

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

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;

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 | - |  |

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}
     />,
   );
 };

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 | - |  |

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

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.

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>
 );

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
+      // TODO: In the future, destroyTooltipOnHide in rc-tooltip needs to be upgrade to destroyOnHidden
-      destroyTooltipOnHide={destroyOnClose ?? !!destroyTooltipOnHide}
+      destroyTooltipOnHide={destroyOnHidden ?? !!destroyTooltipOnHide}
     >
       {tempOpen ? cloneElement(child, { className: childCls }) : child}
     </RcTooltip>

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 |  |

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 |  |

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>