refactor: deprecated destroyTooltipOnHide API (#53656)

* refactor: deprecated destroyTooltipOnHide API * demo: demo update * demo: demo update * demo: demo update * fix: fix --------- Co-authored-by: Jianan Li <jianan@orderly.network>
2025-08-06 16:06:28 +08:00 · 2025-04-26 16:21:22 +08:00 · 2025-04-26 16:21:22 +08:00 · c3c5e4dce9
commit c3c5e4dce9
parent 7a0a76ef7c
20 changed files with 61 additions and 33 deletions
--- 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}
-            destroyTooltipOnHide
+            destroyOnClose
            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
-                    destroyTooltipOnHide
+                    destroyOnClose
                    placement="right"
                    title={<span className={styles.bugReasonTitle}>{locale.bugList}</span>}
                    content={
--- 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" destroyTooltipOnHide>
+      <Tooltip title="GitHub" destroyOnClose>
        <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" destroyTooltipOnHide {...mergeProps}>
+      <Popover key="avatar-popover-key" destroyOnClose {...mergeProps}>
        <Avatar style={mergeStyle}>{`+${numOfChildren - mergeCount}`}</Avatar>
      </Popover>,
    );
--- a/components/color-picker/ColorPicker.tsx
+++ b/components/color-picker/ColorPicker.tsx
@ -60,6 +60,7 @@ const ColorPicker: CompoundedComponent = (props) => {
    getPopupContainer,
    autoAdjustOverflow = true,
    destroyTooltipOnHide,
+    destroyOnClose,
    disabledFormat,
    ...rest
  } = props;
@ -211,7 +212,7 @@ const ColorPicker: CompoundedComponent = (props) => {
    rootClassName,
    getPopupContainer,
    autoAdjustOverflow,
-    destroyTooltipOnHide,
+    destroyOnClose: destroyOnClose ?? !!destroyTooltipOnHide,
  };

  const mergedStyle: React.CSSProperties = { ...colorPicker?.style, ...style };
--- a/components/color-picker/index.en-US.md
+++ b/components/color-picker/index.en-US.md
@ -50,7 +50,8 @@ Common props ref：[Common props](/docs/react/common-props)
 | disabled | Disable ColorPicker | boolean | - | |
 | disabledAlpha | Disable Alpha | boolean | - | 5.8.0 |
 | disabledFormat | Disable format of color | boolean | - | |
-| destroyTooltipOnHide | Whether destroy popover when hidden | `boolean` | false | 5.7.0 |
+| ~~destroyTooltipOnHide~~ | Whether destroy dom when close | `boolean` | false | 5.7.0 |
+| destroyOnClose | 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
@ -51,7 +51,8 @@ group:
 | disabled | 禁用颜色选择器 | boolean | - | |
 | disabledAlpha | 禁用透明度 | boolean | - | 5.8.0 |
 | disabledFormat | 禁用选择颜色格式 | boolean | - | |
-| destroyTooltipOnHide | 关闭后是否销毁弹窗 | `boolean` | false | 5.7.0 |
+| ~~destroyTooltipOnHide~~ | 关闭后是否销毁弹窗 | `boolean` | false | 5.7.0 |
+| destroyOnClose | 关闭后是否销毁弹窗 | `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
@ -94,4 +94,7 @@ export type ColorPickerProps = Omit<
  onClear?: () => void;
  onChangeComplete?: (value: AggregationColor) => void;
  disabledFormat?: boolean;
-} & Pick<PopoverProps, 'getPopupContainer' | 'autoAdjustOverflow' | 'destroyTooltipOnHide'>;
+} & Pick<
+    PopoverProps,
+    'getPopupContainer' | 'autoAdjustOverflow' | 'destroyTooltipOnHide' | 'destroyOnClose'
+  >;
--- a/components/popover/demo/_semantic.tsx
+++ b/components/popover/demo/_semantic.tsx
@ -1,5 +1,6 @@
 import React from 'react';
 import { Popover } from 'antd';
+import type { PopoverProps } from 'antd';

 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@ -15,9 +16,9 @@ const locales = {
  },
 };

-const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+const BlockList: React.FC<React.PropsWithChildren<PopoverProps>> = (props) => {
  const divRef = React.useRef<HTMLDivElement>(null);
-
+  const { children, ...rest } = props;
  return (
    <div ref={divRef} style={{ position: 'absolute', marginTop: 60 }}>
      <Popover
@ -25,9 +26,11 @@ const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
        open
        placement="top"
        autoAdjustOverflow={false}
-        getPopupContainer={() => divRef.current}
-        {...props}
-      />
+        getPopupContainer={() => divRef.current!}
+        {...rest}
+      >
+        {children}
+      </Popover>
    </div>
  );
 };
--- a/components/tooltip/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/tooltip/tests/snapshots/demo-extend.test.ts.snap
@ -1339,12 +1339,12 @@ Array [

 exports[`renders components/tooltip/demo/colorful.tsx extend context correctly 2`] = `[]`;

-exports[`renders components/tooltip/demo/destroy-tooltip-on-hide.tsx extend context correctly 1`] = `
+exports[`renders components/tooltip/demo/destroy-on-close.tsx extend context correctly 1`] = `
 Array [
  <span
    aria-describedby="test-id"
  >
-    Tooltip will destroy when hidden.
+    Dom will destroyed when Tooltip close
  </span>,
  <div
    class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
@ -1369,7 +1369,7 @@ Array [
 ]
 `;

-exports[`renders components/tooltip/demo/destroy-tooltip-on-hide.tsx extend context correctly 2`] = `[]`;
+exports[`renders components/tooltip/demo/destroy-on-close.tsx extend context correctly 2`] = `[]`;

 exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 1`] = `
 Array [
--- a/components/tooltip/tests/snapshots/demo.test.tsx.snap
+++ b/components/tooltip/tests/snapshots/demo.test.tsx.snap
@ -579,11 +579,11 @@ Array [
 ]
 `;

-exports[`renders components/tooltip/demo/destroy-tooltip-on-hide.tsx correctly 1`] = `
+exports[`renders components/tooltip/demo/destroy-on-close.tsx correctly 1`] = `
 <span
  aria-describedby="test-id"
 >
-  Tooltip will destroy when hidden.
+  Dom will destroyed when Tooltip close
 </span>
 `;

--- a/components/tooltip/tests/tooltip.test.tsx
+++ b/components/tooltip/tests/tooltip.test.tsx
@ -538,6 +538,15 @@ describe('Tooltip', () => {
      'Warning: [antd: Tooltip] `afterVisibleChange` is deprecated. Please use `afterOpenChange` instead.',
    );

+    rerender(
+      <Tooltip destroyTooltipOnHide title="bamboo">
+        test
+      </Tooltip>,
+    );
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Tooltip] `destroyTooltipOnHide` is deprecated. Please use `destroyOnClose` instead.',
+    );
+
    // Event Trigger
    const onVisibleChange = jest.fn();
    const afterVisibleChange = jest.fn();
--- a/components/tooltip/demo/destroy-on-close.md
+++ b/components/tooltip/demo/destroy-on-close.md
@ -0,0 +1,7 @@
+## zh-CN
+
+通过 `destroyOnClose` 控制提示关闭时是否销毁 dom 节点。
+
+## en-US
+
+Setting `destroyOnClose` to control whether destroy dom node of tooltip when hidden.
--- a/components/tooltip/demo/destroy-tooltip-on-hide.tsx
+++ b/components/tooltip/demo/destroy-tooltip-on-hide.tsx
@ -2,8 +2,8 @@ import React from 'react';
 import { Tooltip } from 'antd';

 const App: React.FC = () => (
-  <Tooltip destroyTooltipOnHide title="prompt text">
-    <span>Tooltip will destroy when hidden.</span>
+  <Tooltip destroyOnClose title="prompt text">
+    <span>Dom will destroyed when Tooltip close</span>
  </Tooltip>
 );

--- a/components/tooltip/demo/destroy-tooltip-on-hide.md
+++ b/components/tooltip/demo/destroy-tooltip-on-hide.md
@ -1,7 +0,0 @@
-## zh-CN
-
-通过 `destroyTooltipOnHide` 控制提示关闭时是否销毁 dom 节点。
-
-## en-US
-
-Setting `destroyTooltipOnHide` to control whether destroy dom node of tooltip when hidden.
--- a/components/tooltip/index.en-US.md
+++ b/components/tooltip/index.en-US.md
@ -22,7 +22,7 @@ demo:
 <code src="./demo/arrow.tsx">Arrow</code>
 <code src="./demo/shift.tsx" iframe="300">Auto Shift</code>
 <code src="./demo/auto-adjust-overflow.tsx" debug>Adjust placement automatically</code>
-<code src="./demo/destroy-tooltip-on-hide.tsx" debug>Destroy tooltip when hidden</code>
+<code src="./demo/destroy-on-close.tsx" debug>Destroy tooltip when hidden</code>
 <code src="./demo/colorful.tsx">Colorful Tooltip</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/debug.tsx" debug>Debug</code>
--- a/components/tooltip/index.tsx
+++ b/components/tooltip/index.tsx
@ -20,11 +20,11 @@ import { cloneElement, isFragment } from '../_util/reactNode';
 import type { LiteralUnion } from '../_util/type';
 import { devUseWarning } from '../_util/warning';
 import zIndexContext from '../_util/zindexContext';
+import { useComponentConfig } from '../config-provider/context';
 import { useToken } from '../theme/internal';
 import PurePanel from './PurePanel';
 import useStyle from './style';
 import { parseColor } from './util';
-import { useComponentConfig } from '../config-provider/context';

 export type { AdjustOverflow, PlacementsConfig };

@ -115,7 +115,12 @@ export interface AbstractTooltipProps extends LegacyTooltipProps {
  autoAdjustOverflow?: boolean | AdjustOverflow;
  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  children?: React.ReactNode;
+  /** @deprecated Please use `destroyOnClose` instead */
  destroyTooltipOnHide?: boolean | { keepParent?: boolean };
+  /**
+   * @since 5.25.0
+   */
+  destroyOnClose?: boolean;
 }

 export interface TooltipPropsWithOverlay extends AbstractTooltipProps {
@ -141,6 +146,7 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
    afterOpenChange,
    afterVisibleChange,
    destroyTooltipOnHide,
+    destroyOnClose,
    arrow = true,
    title,
    overlay,
@ -200,6 +206,7 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
      ['defaultVisible', 'defaultOpen'],
      ['onVisibleChange', 'onOpenChange'],
      ['afterVisibleChange', 'afterOpenChange'],
+      ['destroyTooltipOnHide', 'destroyOnClose'],
      ['arrowPointAtCenter', 'arrow={{ pointAtCenter: true }}'],
      ['overlayStyle', 'styles={{ root: {} }}'],
      ['overlayInnerStyle', 'styles={{ body: {} }}'],
@ -352,7 +359,8 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
        motionName: getTransitionName(rootPrefixCls, 'zoom-big-fast', props.transitionName),
        motionDeadline: 1000,
      }}
-      destroyTooltipOnHide={!!destroyTooltipOnHide}
+      // TODO: 未来需要把 rc-tooltip 里面的 destroyTooltipOnHide 统一成 destroyOnClose
+      destroyTooltipOnHide={destroyOnClose ?? !!destroyTooltipOnHide}
    >
      {tempOpen ? cloneElement(child, { className: childCls }) : child}
    </RcTooltip>
--- a/components/tooltip/index.zh-CN.md
+++ b/components/tooltip/index.zh-CN.md
@ -24,7 +24,7 @@ demo:
 <code src="./demo/arrow.tsx">箭头展示</code>
 <code src="./demo/shift.tsx" iframe="300">贴边偏移</code>
 <code src="./demo/auto-adjust-overflow.tsx" debug>自动调整位置</code>
-<code src="./demo/destroy-tooltip-on-hide.tsx" debug>隐藏后销毁</code>
+<code src="./demo/destroy-on-close.tsx" debug>隐藏后销毁</code>
 <code src="./demo/colorful.tsx">多彩文字提示</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/debug.tsx" debug>Debug</code>
--- a/components/tooltip/shared/sharedProps.en-US.md
+++ b/components/tooltip/shared/sharedProps.en-US.md
@ -8,7 +8,8 @@
 | autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | true |  |
 | 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 tooltip when hidden | boolean | false |  |
+| ~~destroyTooltipOnHide~~ | Whether destroy dom when close | boolean | false |  |
+| destroyOnClose | 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
@ -8,7 +8,8 @@
 | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true |  |
 | color | 背景颜色 | string | - | 4.3.0 |
 | defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
-| destroyTooltipOnHide | 关闭后是否销毁 Tooltip | boolean | false |  |
+| ~~destroyTooltipOnHide~~ | 关闭后是否销毁 dom | boolean | false |  |
+| destroyOnClose | 关闭后是否销毁 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 |  |