chore: reset deprecated BackTop (#55668)

* chore: reset deprecated BackTop * chore: adjust import * chore: update deps * update * update * update * update * update snap * update --------- Co-authored-by: 二货机器人 <smith3816@gmail.com>
2026-02-09 02:49:18 +08:00 · 2025-11-11 11:21:39 +08:00
parent 08ff4a91c5
commit 706c010671
20 changed files with 714 additions and 5 deletions
--- a/components/tests/snapshots/index.test.ts.snap
+++ b/components/tests/snapshots/index.test.ts.snap
@@ -8,6 +8,7 @@ exports[`antd exports modules correctly 1`] = `
  "App",
  "AutoComplete",
  "Avatar",
+  "BackTop",
  "Badge",
  "Breadcrumb",
  "Button",
--- a/components/back-top/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/back-top/tests/snapshots/demo-extend.test.ts.snap
@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders components/back-top/demo/basic.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="css-var-test-id ant-back-top"
+  >
+    <div
+      class="ant-fade-appear ant-fade-appear-start ant-fade ant-back-top-content"
+    >
+      <div
+        class="ant-back-top-icon"
+      >
+        <span
+          aria-label="vertical-align-top"
+          class="anticon anticon-vertical-align-top"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="vertical-align-top"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+  </div>,
+  Scroll down to see the bottom-right.,
+]
+`;
+
+exports[`renders components/back-top/demo/basic.tsx extend context correctly 2`] = `
+[
+  "Warning: [antd: BackTop] \`BackTop\` is deprecated. Please use \`FloatButton.BackTop\` instead.",
+]
+`;
--- a/components/back-top/tests/snapshots/demo.test.tsx.snap
+++ b/components/back-top/tests/snapshots/demo.test.tsx.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders components/back-top/demo/basic.tsx correctly 1`] = `
+Array [
+  <div
+    class="css-var-test-id ant-back-top"
+  >
+    <div
+      class="ant-back-top-content"
+    >
+      <div
+        class="ant-back-top-icon"
+      >
+        <span
+          aria-label="vertical-align-top"
+          class="anticon anticon-vertical-align-top"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="vertical-align-top"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+  </div>,
+  Scroll down to see the bottom-right.,
+]
+`;
--- a/components/back-top/tests/snapshots/index.test.tsx.snap
+++ b/components/back-top/tests/snapshots/index.test.tsx.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`BackTop rtl render component should be rendered correctly in RTL direction 1`] = `
+<div
+  class="css-var-root ant-back-top ant-back-top-rtl"
+/>
+`;
--- a/components/back-top/tests/a11y.test.ts
+++ b/components/back-top/tests/a11y.test.ts
@@ -0,0 +1,5 @@
+import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
+
+describe('back-top demo a11y', () => {
+  accessibilityDemoTest('back-top');
+});
--- a/components/back-top/tests/demo-extend.test.ts
+++ b/components/back-top/tests/demo-extend.test.ts
@@ -0,0 +1,3 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('back-top');
--- a/components/back-top/tests/demo.test.tsx
+++ b/components/back-top/tests/demo.test.tsx
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('back-top');
--- a/components/back-top/tests/index.test.tsx
+++ b/components/back-top/tests/index.test.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import BackTop from '..';
+import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+
+describe('BackTop', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+  mountTest(BackTop);
+  rtlTest(BackTop);
+
+  it('should scroll to top after click it', async () => {
+    const { container } = render(<BackTop />);
+    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((_, y) => {
+      window.scrollY = y;
+      window.pageYOffset = y;
+      document.documentElement.scrollTop = y;
+    });
+    window.scrollTo(0, 400);
+    await waitFakeTimer();
+    expect(document.documentElement.scrollTop).toBe(400);
+    fireEvent.click(container.querySelector<HTMLDivElement>('.ant-back-top')!);
+    await waitFakeTimer();
+    expect(document.documentElement.scrollTop).toBe(0);
+    scrollToSpy.mockRestore();
+  });
+
+  it('support onClick', () => {
+    const onClick = jest.fn();
+    const { container } = render(<BackTop onClick={onClick} visibilityHeight={0} />);
+    fireEvent.click(container.querySelector<HTMLDivElement>('.ant-back-top')!);
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('invalid target', () => {
+    const onClick = jest.fn();
+    const { container } = render(<BackTop onClick={onClick} target={undefined} />);
+    fireEvent.click(container.querySelector<HTMLDivElement>('.ant-back-top')!);
+    expect(onClick).toHaveBeenCalled();
+  });
+  it('should console Error', () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(<BackTop />);
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: BackTop] `BackTop` is deprecated. Please use `FloatButton.BackTop` instead.',
+    );
+    errSpy.mockRestore();
+  });
+});
--- a/components/back-top/demo/basic.md
+++ b/components/back-top/demo/basic.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+最简单的用法。（已废弃）
+
+## en-US
+
+The most basic usage. (Deprecated)
--- a/components/back-top/demo/basic.tsx
+++ b/components/back-top/demo/basic.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { BackTop } from 'antd';
+
+const Demo = () => (
+  <>
+    <BackTop visibilityHeight={0} />
+    Scroll down to see the bottom-right.
+  </>
+);
+
+export default Demo;
--- a/components/back-top/index.tsx
+++ b/components/back-top/index.tsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import VerticalAlignTopOutlined from '@ant-design/icons/VerticalAlignTopOutlined';
+import CSSMotion from '@rc-component/motion';
+import omit from '@rc-component/util/lib/omit';
+import { clsx } from 'clsx';
+
+import getScroll from '../_util/getScroll';
+import { cloneElement } from '../_util/reactNode';
+import scrollTo from '../_util/scrollTo';
+import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
+import { devUseWarning } from '../_util/warning';
+import type { ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
+import useStyle from './style';
+
+export interface BackTopProps {
+  visibilityHeight?: number;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  target?: () => HTMLElement | Window | Document;
+  prefixCls?: string;
+  className?: string;
+  rootClassName?: string;
+  style?: React.CSSProperties;
+  duration?: number;
+}
+
+const BackTop: React.FC<React.PropsWithChildren<BackTopProps>> = (props) => {
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    rootClassName,
+    visibilityHeight = 400,
+    target,
+    onClick,
+    duration = 450,
+    children,
+  } = props;
+
+  const [visible, setVisible] = React.useState<boolean>(visibilityHeight === 0);
+
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  const getDefaultTarget = () => ref.current?.ownerDocument || window;
+
+  const handleScroll = throttleByAnimationFrame(
+    (e: React.UIEvent<HTMLElement, UIEvent> | { target: any }) => {
+      const scrollTop = getScroll(e.target);
+      setVisible(scrollTop >= visibilityHeight);
+    },
+  );
+
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('BackTop');
+    warning.deprecated(false, 'BackTop', 'FloatButton.BackTop');
+  }
+
+  React.useEffect(() => {
+    const getTarget = target || getDefaultTarget;
+    const container = getTarget();
+    handleScroll({ target: container });
+    container?.addEventListener('scroll', handleScroll);
+    return () => {
+      handleScroll.cancel();
+      container?.removeEventListener('scroll', handleScroll);
+    };
+  }, [target]);
+
+  const scrollToTop = (e: React.MouseEvent<HTMLDivElement>) => {
+    scrollTo(0, { getContainer: target || getDefaultTarget, duration });
+    onClick?.(e);
+  };
+
+  const { getPrefixCls, direction } = React.useContext<ConfigConsumerProps>(ConfigContext);
+
+  const prefixCls = getPrefixCls('back-top', customizePrefixCls);
+
+  const rootPrefixCls = getPrefixCls();
+
+  const rootCls = useCSSVarCls(prefixCls);
+
+  const [hashId, cssVarCls] = useStyle(prefixCls, rootCls);
+
+  const classString = clsx(
+    hashId,
+    cssVarCls,
+    prefixCls,
+    {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+    rootClassName,
+  );
+
+  // fix https://fb.me/react-unknown-prop
+  const divProps = omit(props, [
+    'prefixCls',
+    'className',
+    'rootClassName',
+    'children',
+    'visibilityHeight',
+    'target',
+  ]);
+
+  const defaultElement = (
+    <div className={`${prefixCls}-content`}>
+      <div className={`${prefixCls}-icon`}>
+        <VerticalAlignTopOutlined />
+      </div>
+    </div>
+  );
+
+  return (
+    <div {...divProps} className={classString} onClick={scrollToTop} ref={ref}>
+      <CSSMotion visible={visible} motionName={`${rootPrefixCls}-fade`}>
+        {({ className: motionClassName }) =>
+          cloneElement(children || defaultElement, ({ className: cloneCls }) => ({
+            className: clsx(motionClassName, cloneCls),
+          }))
+        }
+      </CSSMotion>
+    </div>
+  );
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  BackTop.displayName = 'BackTop';
+}
+
+export default BackTop;
--- a/components/back-top/style/index.ts
+++ b/components/back-top/style/index.ts
@@ -0,0 +1,158 @@
+import { unit } from '@ant-design/cssinjs';
+import type { CSSObject } from '@ant-design/cssinjs';
+
+import { resetComponent } from '../../style';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
+
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+  /**
+   * @desc 弹出层的 z-index
+   * @descEN z-index of popup
+   */
+  zIndexPopup: number;
+}
+
+type BackTopToken = FullToken<'BackTop'> & {
+  /**
+   * @desc BackTop 背景颜色
+   * @descEN Background color of BackTop
+   */
+  backTopBackground: string;
+  /**
+   * @desc BackTop 文字颜色
+   * @descEN Text color of BackTop
+   */
+  backTopColor: string;
+  /**
+   * @desc BackTop 悬停背景颜色
+   * @descEN Hover background color of BackTop
+   */
+  backTopHoverBackground: string;
+  /**
+   * @desc BackTop 字体大小
+   * @descEN Font size of BackTop
+   */
+  backTopFontSize: number;
+  /**
+   * @desc BackTop 尺寸
+   * @descEN Size of BackTop
+   */
+  backTopSize: number;
+
+  // Position
+  /**
+   * @desc BackTop 底部偏移量
+   * @descEN Bottom offset of BackTop
+   */
+  backTopBlockEnd: number | string;
+  /**
+   * @desc BackTop 右侧偏移量
+   * @descEN Right offset of BackTop
+   */
+  backTopInlineEnd: number | string;
+  /**
+   * @desc BackTop 中等屏幕右侧偏移量
+   * @descEN Right offset of BackTop on medium screens
+   */
+  backTopInlineEndMD: number | string;
+  /**
+   * @desc BackTop 小屏幕右侧偏移量
+   * @descEN Right offset of BackTop on small screens
+   */
+  backTopInlineEndXS: number | string;
+};
+
+// ============================== Shared ==============================
+const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token): CSSObject => {
+  const { componentCls, backTopFontSize, backTopSize, zIndexPopup } = token;
+
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+
+      position: 'fixed',
+      insetInlineEnd: token.backTopInlineEnd,
+      insetBlockEnd: token.backTopBlockEnd,
+      zIndex: zIndexPopup,
+      width: 40,
+      height: 40,
+      cursor: 'pointer',
+
+      '&:empty': {
+        display: 'none',
+      },
+
+      [`${componentCls}-content`]: {
+        width: backTopSize,
+        height: backTopSize,
+        overflow: 'hidden',
+        color: token.backTopColor,
+        textAlign: 'center',
+        backgroundColor: token.backTopBackground,
+        borderRadius: backTopSize,
+        transition: `all ${token.motionDurationMid}`,
+
+        '&:hover': {
+          backgroundColor: token.backTopHoverBackground,
+          transition: `all ${token.motionDurationMid}`,
+        },
+      },
+
+      // change to .backtop .backtop-icon
+      [`${componentCls}-icon`]: {
+        fontSize: backTopFontSize,
+        lineHeight: unit(backTopSize),
+      },
+    },
+  };
+};
+
+const genMediaBackTopStyle: GenerateStyle<BackTopToken> = (token): CSSObject => {
+  const { componentCls, screenMD, screenXS, backTopInlineEndMD, backTopInlineEndXS } = token;
+  return {
+    [`@media (max-width: ${unit(screenMD)})`]: {
+      [componentCls]: {
+        insetInlineEnd: backTopInlineEndMD,
+      },
+    },
+    [`@media (max-width: ${unit(screenXS)})`]: {
+      [componentCls]: {
+        insetInlineEnd: backTopInlineEndXS,
+      },
+    },
+  };
+};
+
+export const prepareComponentToken: GetDefaultToken<'BackTop'> = (token) => ({
+  zIndexPopup: token.zIndexBase + 10,
+});
+
+// ============================== Export ==============================
+export default genStyleHooks(
+  'BackTop',
+  (token) => {
+    const {
+      fontSizeHeading3,
+      colorTextDescription,
+      colorTextLightSolid,
+      colorText,
+      controlHeightLG,
+      calc,
+    } = token;
+    const backTopToken = mergeToken<BackTopToken>(token, {
+      backTopBackground: colorTextDescription,
+      backTopColor: colorTextLightSolid,
+      backTopHoverBackground: colorText,
+      backTopFontSize: fontSizeHeading3,
+      backTopSize: controlHeightLG,
+      backTopBlockEnd: calc(controlHeightLG).mul(1.25).equal(),
+      backTopInlineEnd: calc(controlHeightLG).mul(2.5).equal(),
+      backTopInlineEndMD: calc(controlHeightLG).mul(1.5).equal(),
+      backTopInlineEndXS: calc(controlHeightLG).mul(0.5).equal(),
+    });
+    return [genSharedBackTopStyle(backTopToken), genMediaBackTopStyle(backTopToken)];
+  },
+  prepareComponentToken,
+);
--- a/components/config-provider/tests/snapshots/components.test.tsx.snap
+++ b/components/config-provider/tests/snapshots/components.test.tsx.snap
@@ -638,6 +638,244 @@ exports[`ConfigProvider components Avatar prefixCls 1`] = `
 </span>
 `;

+exports[`ConfigProvider components BackTop configProvider 1`] = `
+<div
+  class="css-var-root config-back-top"
+>
+  <div
+    class="config-fade-appear config-fade-appear-start config-fade config-back-top-content"
+  >
+    <div
+      class="config-back-top-icon"
+    >
+      <span
+        aria-label="vertical-align-top"
+        class="anticon anticon-vertical-align-top"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="vertical-align-top"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ConfigProvider components BackTop configProvider componentDisabled 1`] = `
+<div
+  class="css-var-root config-back-top"
+>
+  <div
+    class="config-fade-appear config-fade-appear-start config-fade config-back-top-content"
+  >
+    <div
+      class="config-back-top-icon"
+    >
+      <span
+        aria-label="vertical-align-top"
+        class="anticon anticon-vertical-align-top"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="vertical-align-top"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ConfigProvider components BackTop configProvider componentSize large 1`] = `
+<div
+  class="css-var-root config-back-top"
+>
+  <div
+    class="config-fade-appear config-fade-appear-start config-fade config-back-top-content"
+  >
+    <div
+      class="config-back-top-icon"
+    >
+      <span
+        aria-label="vertical-align-top"
+        class="anticon anticon-vertical-align-top"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="vertical-align-top"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ConfigProvider components BackTop configProvider componentSize middle 1`] = `
+<div
+  class="css-var-root config-back-top"
+>
+  <div
+    class="config-fade-appear config-fade-appear-start config-fade config-back-top-content"
+  >
+    <div
+      class="config-back-top-icon"
+    >
+      <span
+        aria-label="vertical-align-top"
+        class="anticon anticon-vertical-align-top"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="vertical-align-top"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ConfigProvider components BackTop configProvider componentSize small 1`] = `
+<div
+  class="css-var-root config-back-top"
+>
+  <div
+    class="config-fade-appear config-fade-appear-start config-fade config-back-top-content"
+  >
+    <div
+      class="config-back-top-icon"
+    >
+      <span
+        aria-label="vertical-align-top"
+        class="anticon anticon-vertical-align-top"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="vertical-align-top"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ConfigProvider components BackTop normal 1`] = `
+<div
+  class="css-var-root ant-back-top"
+>
+  <div
+    class="ant-fade-appear ant-fade-appear-start ant-fade ant-back-top-content"
+  >
+    <div
+      class="ant-back-top-icon"
+    >
+      <span
+        aria-label="vertical-align-top"
+        class="anticon anticon-vertical-align-top"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="vertical-align-top"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ConfigProvider components BackTop prefixCls 1`] = `
+<div
+  class="css-var-root prefix-BackTop"
+>
+  <div
+    class="ant-fade-appear ant-fade-appear-start ant-fade prefix-BackTop-content"
+  >
+    <div
+      class="prefix-BackTop-icon"
+    >
+      <span
+        aria-label="vertical-align-top"
+        class="anticon anticon-vertical-align-top"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="vertical-align-top"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`ConfigProvider components Badge configProvider 1`] = `
 <div>
  <span
--- a/components/config-provider/tests/components.test.tsx
+++ b/components/config-provider/tests/components.test.tsx
@@ -8,6 +8,7 @@ import Alert from '../../alert';
 import Anchor from '../../anchor';
 import AutoComplete from '../../auto-complete';
 import Avatar from '../../avatar';
+import BackTop from '../../back-top';
 import Badge from '../../badge';
 import Breadcrumb from '../../breadcrumb';
 import Button from '../../button';
@@ -142,6 +143,9 @@ describe('ConfigProvider', () => {
    // Avatar
    testPair('Avatar', (props) => <Avatar {...props} />);

+    // BackTop
+    testPair('BackTop', (props) => <BackTop visibilityHeight={0} {...props} />);
+
    // Badge
    testPair('Badge', (props) => {
      const newProps = { ...props };
--- a/components/float-button/BackTop.tsx
+++ b/components/float-button/BackTop.tsx
@@ -112,7 +112,7 @@ const BackTop = React.forwardRef<FloatButtonRef, BackTopProps>((props, ref) => {
 });

 if (process.env.NODE_ENV !== 'production') {
-  BackTop.displayName = 'BackTop';
+  BackTop.displayName = 'FloatButton.BackTop';
 }

 export default BackTop;
--- a/components/index.ts
+++ b/components/index.ts
@@ -12,6 +12,8 @@ export { default as AutoComplete } from './auto-complete';
 export type { AutoCompleteProps } from './auto-complete';
 export { default as Avatar } from './avatar';
 export type { AvatarProps } from './avatar';
+export { default as BackTop } from './back-top';
+export type { BackTopProps } from './back-top';
 export { default as Badge } from './badge';
 export type { BadgeProps } from './badge';
 export { default as Breadcrumb } from './breadcrumb';
--- a/components/input/Input.tsx
+++ b/components/input/Input.tsx
@@ -1,8 +1,8 @@
 import React, { forwardRef, useContext, useEffect, useRef } from 'react';
 import type { InputRef, InputProps as RcInputProps } from '@rc-component/input';
 import RcInput from '@rc-component/input';
-import { triggerFocus } from '@rc-component/input/lib/utils/commonUtils';
-import type { InputFocusOptions } from '@rc-component/input/lib/utils/commonUtils';
+import { triggerFocus } from '@rc-component/util/lib/Dom/focus';
+import type { InputFocusOptions } from '@rc-component/util/lib/Dom/focus';
 import { composeRef } from '@rc-component/util/lib/ref';
 import { clsx } from 'clsx';

--- a/components/theme/interface/components.ts
+++ b/components/theme/interface/components.ts
@@ -4,6 +4,7 @@ import type { ComponentToken as AlertComponentToken } from '../../alert/style';
 import type { ComponentToken as AnchorComponentToken } from '../../anchor/style';
 import type { ComponentToken as AppComponentToken } from '../../app/style';
 import type { ComponentToken as AvatarComponentToken } from '../../avatar/style';
+import type { ComponentToken as BackTopComponentToken } from '../../back-top/style';
 import type { ComponentToken as BadgeComponentToken } from '../../badge/style';
 import type { ComponentToken as BreadcrumbComponentToken } from '../../breadcrumb/style';
 import type { ComponentToken as ButtonComponentToken } from '../../button/style';
@@ -70,6 +71,7 @@ export interface ComponentTokenMap {
  Alert?: AlertComponentToken;
  Anchor?: AnchorComponentToken;
  Avatar?: AvatarComponentToken;
+  BackTop?: BackTopComponentToken;
  Badge?: BadgeComponentToken;
  Button?: ButtonComponentToken;
  Breadcrumb?: BreadcrumbComponentToken;
--- a/package.json
+++ b/package.json
@@ -125,7 +125,7 @@
    "@rc-component/form": "~1.4.0",
    "@rc-component/image": "~1.5.1",
    "@rc-component/input": "~1.1.0",
-    "@rc-component/input-number": "~1.5.0",
+    "@rc-component/input-number": "~1.5.1",
    "@rc-component/mentions": "~1.5.5",
    "@rc-component/menu": "~1.1.4",
    "@rc-component/motion": "~1.1.4",
@@ -151,7 +151,7 @@
    "@rc-component/tree-select": "~1.3.0",
    "@rc-component/trigger": "^3.6.15",
    "@rc-component/upload": "~1.1.0",
-    "@rc-component/util": "^1.3.1",
+    "@rc-component/util": "^1.4.0",
    "clsx": "^2.1.1",
    "dayjs": "^1.11.11",
    "scroll-into-view-if-needed": "^3.1.0",
--- a/tests/snapshots/index.test.ts.snap
+++ b/tests/snapshots/index.test.ts.snap
@@ -8,6 +8,7 @@ exports[`antd dist files exports modules correctly 1`] = `
  "App",
  "AutoComplete",
  "Avatar",
+  "BackTop",
  "Badge",
  "Breadcrumb",
  "Button",