chore: auto merge branches (#49834)

chore: merge master into feature
2024-11-27 20:49:53 +08:00 · 2024-07-11 22:07:47 +00:00 · 2024-07-11 22:07:47 +00:00 · 3dcf2cbc58
commit 3dcf2cbc58
parent 10e46c107e cd2dc302b2
76 changed files with 660 additions and 352 deletions
--- a/.dumi/theme/common/LiveCode.tsx
+++ b/.dumi/theme/common/LiveCode.tsx
@ -1,16 +1,12 @@
 import type { ComponentProps, FC } from 'react';
-import React, { useEffect, useState } from 'react';
-import { EditFilled } from '@ant-design/icons';
-import { Tooltip } from 'antd';
+import React from 'react';
 import { createStyles } from 'antd-style';
 import SourceCodeEditor from 'dumi/theme-default/slots/SourceCodeEditor';

-import useLocale from '../../hooks/useLocale';
 import LiveError from '../slots/LiveError';

 const useStyle = createStyles(({ token, css }) => {
-  const { colorBgContainer, colorIcon } = token;
-
+  const { colorBgContainer } = token;
  return {
    editor: css`
      // override dumi editor styles
@ -18,7 +14,6 @@ const useStyle = createStyles(({ token, css }) => {
        .dumi-default-source-code {
          background: ${colorBgContainer};
        }
-
        .dumi-default-source-code > pre,
        .dumi-default-source-code-scroll-content > pre,
        .dumi-default-source-code-editor-textarea {
@ -48,70 +43,24 @@ const useStyle = createStyles(({ token, css }) => {
        }
      }
    `,
-
-    editableIcon: css`
-      position: absolute;
-      z-index: 2;
-      height: 32px;
-      width: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      top: 16px;
-      inset-inline-end: 56px;
-      color: ${colorIcon};
-    `,
  };
 });

-const locales = {
-  cn: {
-    demoEditable: '编辑 Demo 可实时预览',
-  },
-  en: {
-    demoEditable: 'Edit demo with real-time preview',
-  },
-};
-
-const HIDE_LIVE_DEMO_TIP = 'hide-live-demo-tip';
-
 const LiveCode: FC<
  {
    error: Error | null;
  } & Pick<ComponentProps<typeof SourceCodeEditor>, 'lang' | 'initialValue' | 'onChange'>
 > = (props) => {
-  const [open, setOpen] = useState(false);
  const { styles } = useStyle();
-  const [locale] = useLocale(locales);
-
-  useEffect(() => {
-    const shouldOpen = !localStorage.getItem(HIDE_LIVE_DEMO_TIP);
-    if (shouldOpen) {
-      setOpen(true);
-    }
-  }, []);
-
-  const handleOpenChange = (newOpen: boolean) => {
-    setOpen(newOpen);
-    if (!newOpen) {
-      localStorage.setItem(HIDE_LIVE_DEMO_TIP, 'true');
-    }
-  };
-
  return (
-    <>
-      <div className={styles.editor}>
-        <SourceCodeEditor
-          lang={props.lang}
-          initialValue={props.initialValue}
-          onChange={props.onChange}
-        />
-        <LiveError error={props.error} />
-      </div>
-      <Tooltip title={locale.demoEditable} open={open} onOpenChange={handleOpenChange}>
-        <EditFilled className={styles.editableIcon} />
-      </Tooltip>
-    </>
+    <div className={styles.editor}>
+      <SourceCodeEditor
+        lang={props.lang}
+        initialValue={props.initialValue}
+        onChange={props.onChange}
+      />
+      <LiveError error={props.error} />
+    </div>
  );
 };

--- a/components/app/demo/basic.tsx
+++ b/components/app/demo/basic.tsx
@ -18,7 +18,7 @@ const MyPage = () => {

  const showNotification = () => {
    notification.info({
-      message: `Notification topLeft`,
+      message: 'Notification topLeft',
      description: 'Hello, Ant Design!!',
      placement: 'topLeft',
    });
--- a/components/app/demo/config.tsx
+++ b/components/app/demo/config.tsx
@ -11,7 +11,7 @@ const MyPage = () => {

  const showNotification = () => {
    notification.info({
-      message: `Notification`,
+      message: 'Notification',
      description: 'Hello, Ant Design!!',
    });
  };
--- a/components/badge/style/index.ts
+++ b/components/badge/style/index.ts
@ -17,12 +17,12 @@ export interface ComponentToken {
   * @desc 徽标高度
   * @descEN Height of badge
   */
-  indicatorHeight: number;
+  indicatorHeight: number | string;
  /**
   * @desc 小号徽标高度
   * @descEN Height of small badge
   */
-  indicatorHeightSM: number;
+  indicatorHeightSM: number | string;
  /**
   * @desc 点状徽标尺寸
   * @descEN Size of dot badge
--- a/components/button/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/button/tests/snapshots/demo-extend.test.ts.snap
@ -2343,11 +2343,34 @@ exports[`renders components/button/demo/linear-gradient.tsx extend context corre
    class="ant-space-item"
  >
    <button
-      class="ant-btn ant-btn-primary ant-btn-lg"
+      class="ant-btn ant-btn-primary ant-btn-lg css-ykstnd"
      type="button"
    >
+      <span
+        class="ant-btn-icon"
+      >
+        <span
+          aria-label="ant-design"
+          class="anticon anticon-ant-design"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="ant-design"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"
+            />
+          </svg>
+        </span>
+      </span>
      <span>
-        Gradient 1
+        Gradient Button
      </span>
    </button>
  </div>
@ -2355,23 +2378,11 @@ exports[`renders components/button/demo/linear-gradient.tsx extend context corre
    class="ant-space-item"
  >
    <button
-      class="ant-btn ant-btn-primary ant-btn-lg"
+      class="ant-btn ant-btn-default ant-btn-lg css-ykstnd"
      type="button"
    >
      <span>
-        Gradient 2
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-space-item"
-  >
-    <button
-      class="ant-btn ant-btn-primary ant-btn-lg"
-      type="button"
-    >
-      <span>
-        Gradient 3
+        Button
      </span>
    </button>
  </div>
--- a/components/button/tests/snapshots/demo.test.ts.snap
+++ b/components/button/tests/snapshots/demo.test.ts.snap
@ -1973,11 +1973,34 @@ exports[`renders components/button/demo/linear-gradient.tsx correctly 1`] = `
    class="ant-space-item"
  >
    <button
-      class="ant-btn ant-btn-primary ant-btn-lg"
+      class="ant-btn ant-btn-primary ant-btn-lg css-ykstnd"
      type="button"
    >
+      <span
+        class="ant-btn-icon"
+      >
+        <span
+          aria-label="ant-design"
+          class="anticon anticon-ant-design"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="ant-design"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"
+            />
+          </svg>
+        </span>
+      </span>
      <span>
-        Gradient 1
+        Gradient Button
      </span>
    </button>
  </div>
@ -1985,23 +2008,11 @@ exports[`renders components/button/demo/linear-gradient.tsx correctly 1`] = `
    class="ant-space-item"
  >
    <button
-      class="ant-btn ant-btn-primary ant-btn-lg"
+      class="ant-btn ant-btn-default ant-btn-lg css-ykstnd"
      type="button"
    >
      <span>
-        Gradient 2
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-space-item"
-  >
-    <button
-      class="ant-btn ant-btn-primary ant-btn-lg"
-      type="button"
-    >
-      <span>
-        Gradient 3
+        Button
      </span>
    </button>
  </div>
--- a/components/button/demo/icon.md
+++ b/components/button/demo/icon.md
@ -1,7 +1,7 @@
 ## zh-CN

-可以通过 `icon `属性添加图标，并使用 `iconPosition` 调整图标的位置。
+可以通过 `icon`属性添加图标。

 ## en-US

-You can add an icon using the `icon` property, additionally you can adjust the position of the icon using `iconPosition`.
+You can add an icon using the `icon` property.
--- a/components/button/demo/linear-gradient.tsx
+++ b/components/button/demo/linear-gradient.tsx
@ -1,66 +1,48 @@
-import React from 'react';
-import { TinyColor } from '@ctrl/tinycolor';
+import React, { useContext } from 'react';
 import { Button, ConfigProvider, Space } from 'antd';
+import { AntDesignOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';

-const colors1 = ['#6253E1', '#04BEFE'];
-const colors2 = ['#fc6076', '#ff9a44', '#ef9d43', '#e75516'];
-const colors3 = ['#40e495', '#30dd8a', '#2bb673'];
-const getHoverColors = (colors: string[]) =>
-  colors.map((color) => new TinyColor(color).lighten(5).toString());
-const getActiveColors = (colors: string[]) =>
-  colors.map((color) => new TinyColor(color).darken(5).toString());
+const App: React.FC = () => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const rootPrefixCls = getPrefixCls();
+  const linearGradientButton = css`
+    &.${rootPrefixCls}-btn-primary:not([disabled]):not(.${rootPrefixCls}-btn-dangerous) {
+      border-width: 0;

-const App: React.FC = () => (
-  <Space>
+      > span {
+        position: relative;
+      }
+
+      &::before {
+        content: '';
+        background: linear-gradient(135deg, #6253E1, #04BEFE);
+        position: absolute;
+        inset: 0;
+        opacity: 1;
+        transition: all 0.3s;
+        border-radius: inherit;
+      }
+
+      &:hover::before {
+        opacity: 0;
+      }
+    }
+  `;
+  return (
    <ConfigProvider
-      theme={{
-        components: {
-          Button: {
-            colorPrimary: `linear-gradient(135deg, ${colors1.join(', ')})`,
-            colorPrimaryHover: `linear-gradient(135deg, ${getHoverColors(colors1).join(', ')})`,
-            colorPrimaryActive: `linear-gradient(135deg, ${getActiveColors(colors1).join(', ')})`,
-            lineWidth: 0,
-          },
-        },
+      button={{
+        className: linearGradientButton,
      }}
    >
-      <Button type="primary" size="large">
-        Gradient 1
-      </Button>
+      <Space>
+        <Button type="primary" size="large" icon={<AntDesignOutlined />}>
+          Gradient Button
+        </Button>
+        <Button size="large">Button</Button>
+      </Space>
    </ConfigProvider>
-    <ConfigProvider
-      theme={{
-        components: {
-          Button: {
-            colorPrimary: `linear-gradient(90deg,  ${colors2.join(', ')})`,
-            colorPrimaryHover: `linear-gradient(90deg, ${getHoverColors(colors2).join(', ')})`,
-            colorPrimaryActive: `linear-gradient(90deg, ${getActiveColors(colors2).join(', ')})`,
-            lineWidth: 0,
-          },
-        },
-      }}
-    >
-      <Button type="primary" size="large">
-        Gradient 2
-      </Button>
-    </ConfigProvider>
-    <ConfigProvider
-      theme={{
-        components: {
-          Button: {
-            colorPrimary: `linear-gradient(116deg,  ${colors3.join(', ')})`,
-            colorPrimaryHover: `linear-gradient(116deg, ${getHoverColors(colors3).join(', ')})`,
-            colorPrimaryActive: `linear-gradient(116deg, ${getActiveColors(colors3).join(', ')})`,
-            lineWidth: 0,
-          },
-        },
-      }}
-    >
-      <Button type="primary" size="large">
-        Gradient 3
-      </Button>
-    </ConfigProvider>
-  </Space>
-);
+  );
+};

 export default App;
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@ -37,12 +37,12 @@ group:

 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">按钮类型</code>
-<code src="./demo/icon.tsx" >按钮图标</code>
+<code src="./demo/icon.tsx">按钮图标</code>
 <code src="./demo/icon-position.tsx" version="5.17.0">按钮图标位置</code>
 <code src="./demo/debug-icon.tsx" debug>调试图标按钮</code>
 <code src="./demo/debug-block.tsx" debug>调试按钮block属性</code>
 <code src="./demo/size.tsx">按钮尺寸</code>
-<code src="./demo/disabled.tsx">不可用状态</code> 
+<code src="./demo/disabled.tsx">不可用状态</code>
 <code src="./demo/loading.tsx">加载中状态</code>
 <code src="./demo/multiple.tsx">多个按钮组合</code>
 <code src="./demo/ghost.tsx">幽灵按钮</code>
--- a/components/calendar/style/index.ts
+++ b/components/calendar/style/index.ts
@ -16,17 +16,17 @@ export interface ComponentToken {
   * @desc 年选择器宽度
   * @descEN Width of year select
   */
-  yearControlWidth: number;
+  yearControlWidth: number | string;
  /**
   * @desc 月选择器宽度
   * @descEN Width of month select
   */
-  monthControlWidth: number;
+  monthControlWidth: number | string;
  /**
   * @desc 迷你日历内容高度
   * @descEN Height of mini calendar content
   */
-  miniContentHeight: number;
+  miniContentHeight: number | string;
  /**
   * @desc 完整日历背景色
   * @descEN Background color of full calendar
@ -46,9 +46,9 @@ export interface ComponentToken {

 interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken, PanelComponentToken {
  calendarCls: string;
-  dateValueHeight: number;
-  weekHeight: number;
-  dateContentHeight: number;
+  dateValueHeight: number | string;
+  weekHeight: number | string;
+  dateContentHeight: number | string;
 }

 export const genCalendarStyles = (token: CalendarToken): CSSObject => {
--- a/components/card/style/index.ts
+++ b/components/card/style/index.ts
@ -15,22 +15,22 @@ export interface ComponentToken {
   * @desc 卡片头部文字大小
   * @descEN Font size of card header
   */
-  headerFontSize: number;
+  headerFontSize: number | string;
  /**
   * @desc 小号卡片头部文字大小
   * @descEN Font size of small card header
   */
-  headerFontSizeSM: number;
+  headerFontSizeSM: number | string;
  /**
   * @desc 卡片头部高度
   * @descEN Height of card header
   */
-  headerHeight: number;
+  headerHeight: number | string;
  /**
   * @desc 小号卡片头部高度
   * @descEN Height of small card header
   */
-  headerHeightSM: number;
+  headerHeightSM: number | string;
  /**
   * @desc 操作区背景色
   * @descEN Background color of card actions
--- a/components/carousel/style/index.ts
+++ b/components/carousel/style/index.ts
@ -9,12 +9,12 @@ export interface ComponentToken {
   * @desc 指示点宽度
   * @descEN Width of indicator
   */
-  dotWidth: number;
+  dotWidth: number | string;
  /**
   * @desc 指示点高度
   * @descEN Height of indicator
   */
-  dotHeight: number;
+  dotHeight: number | string;
  /**
   * @desc 指示点之间的间距
   * @descEN gap between indicator
@ -31,7 +31,7 @@ export interface ComponentToken {
   * @desc 激活态指示点宽度
   * @descEN Width of active indicator
   */
-  dotActiveWidth: number;
+  dotActiveWidth: number | string;
  /**
   * @desc 切换箭头大小
   * @descEN Size of arrows
--- a/components/cascader/style/index.ts
+++ b/components/cascader/style/index.ts
@ -11,17 +11,17 @@ export interface ComponentToken {
   * @desc 选择器宽度
   * @descEN Width of Cascader
   */
-  controlWidth: number;
+  controlWidth: number | string;
  /**
   * @desc 选项宽度
   * @descEN Width of item
   */
-  controlItemWidth: number;
+  controlItemWidth: number | string;
  /**
   * @desc 下拉菜单高度
   * @descEN Height of dropdown
   */
-  dropdownHeight: number;
+  dropdownHeight: number | string;
  /**
   * @desc 选项选中时背景色
   * @descEN Background color of selected item
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@ -6,14 +6,18 @@ import type { AlertProps } from '../alert';
 import type { BadgeProps } from '../badge';
 import type { ButtonProps } from '../button';
 import type { CardProps } from '../card';
+import type { CascaderProps } from '../cascader';
 import type { CollapseProps } from '../collapse';
+import type { DatePickerProps, RangePickerProps } from '../date-picker';
 import type { DrawerProps } from '../drawer';
 import type { FlexProps } from '../flex/interface';
 import type { FloatButtonGroupProps } from '../float-button/interface';
 import type { FormProps } from '../form/Form';
 import type { InputProps, TextAreaProps } from '../input';
+import type { InputNumberProps } from '../input-number';
 import type { ListItemProps } from '../list';
 import type { Locale } from '../locale';
+import type { MentionsProps } from '../mentions';
 import type { MenuProps } from '../menu';
 import type { ModalProps } from '../modal';
 import type { ArgsProps } from '../notification/interface';
@ -24,16 +28,13 @@ import type { TableProps } from '../table';
 import type { TabsProps } from '../tabs';
 import type { TagProps } from '../tag';
 import type { AliasToken, MappingAlgorithm, OverrideToken } from '../theme/interface';
+import type { TimePickerProps } from '../time-picker';
 import type { TourProps } from '../tour/interface';
 import type { TransferProps } from '../transfer';
-import type { InputNumberProps } from '../input-number';
 import type { TreeSelectProps } from '../tree-select';
-import type { DatePickerProps, RangePickerProps } from '../date-picker';
-import type { TimePickerProps } from '../time-picker';
-import type { CascaderProps } from '../cascader';
-import type { MentionsProps } from '../mentions';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';

+export const defaultPrefixCls = 'ant';
 export const defaultIconPrefixCls = 'anticon';

 export interface Theme {
@ -195,6 +196,7 @@ export interface ListConfig extends ComponentStyleConfig {
 }

 export const Variants = ['outlined', 'borderless', 'filled'] as const;
+
 export type Variant = (typeof Variants)[number];

 export interface WaveConfig {
@ -299,7 +301,7 @@ const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) =>
  if (customizePrefixCls) {
    return customizePrefixCls;
  }
-  return suffixCls ? `ant-${suffixCls}` : 'ant';
+  return suffixCls ? `${defaultPrefixCls}-${suffixCls}` : defaultPrefixCls;
 };

 // zombieJ: 🚨 Do not pass `defaultRenderEmpty` here since it will cause circular dependency.
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@ -19,10 +19,12 @@ import type {
  BadgeConfig,
  ButtonConfig,
  CardConfig,
+  CascaderConfig,
  CollapseConfig,
  ComponentStyleConfig,
  ConfigConsumerProps,
  CSPConfig,
+  DatePickerConfig,
  DirectionType,
  DrawerConfig,
  FlexConfig,
@ -30,12 +32,15 @@ import type {
  FormConfig,
  ImageConfig,
  InputConfig,
+  InputNumberConfig,
  ListConfig,
+  MentionsConfig,
  MenuConfig,
  ModalConfig,
  NotificationConfig,
  PaginationConfig,
  PopupOverflow,
+  RangePickerConfig,
  SelectConfig,
  SpaceConfig,
  TableConfig,
@ -44,19 +49,20 @@ import type {
  TextAreaConfig,
  Theme,
  ThemeConfig,
+  TimePickerConfig,
  TourConfig,
  TransferConfig,
-  WaveConfig,
-  Variant,
-  InputNumberConfig,
-  RangePickerConfig,
-  DatePickerConfig,
-  TimePickerConfig,
-  CascaderConfig,
  TreeSelectConfig,
-  MentionsConfig,
+  Variant,
+  WaveConfig,
+} from './context';
+import {
+  ConfigConsumer,
+  ConfigContext,
+  defaultIconPrefixCls,
+  defaultPrefixCls,
+  Variants,
 } from './context';
-import { ConfigConsumer, ConfigContext, defaultIconPrefixCls, Variants } from './context';
 import { registerTheme } from './cssVariables';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
 import { DisabledContextProvider } from './DisabledContext';
@ -93,6 +99,7 @@ export const warnContext: (componentName: string) => void =
 export {
  ConfigConsumer,
  ConfigContext,
+  defaultPrefixCls,
  defaultIconPrefixCls,
  type ConfigConsumerProps,
  type CSPConfig,
@ -235,8 +242,6 @@ interface ProviderChildrenProps extends ConfigProviderProps {

 type holderRenderType = (children: React.ReactNode) => React.ReactNode;

-export const defaultPrefixCls = 'ant';
-
 let globalPrefixCls: string;
 let globalIconPrefixCls: string;
 let globalTheme: ThemeConfig;
--- a/components/descriptions/style/index.ts
+++ b/components/descriptions/style/index.ts
@ -196,6 +196,7 @@ const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token) => {
          [`${componentCls}-item-content`]: {
            display: 'inline-flex',
            alignItems: 'baseline',
+            minWidth: 0,
          },
        },
      },
--- a/components/empty/style/index.ts
+++ b/components/empty/style/index.ts
@ -11,7 +11,7 @@ interface EmptyToken extends FullToken<'Empty'> {
  emptyImgCls: string;
  emptyImgHeight: number | string;
  emptyImgHeightSM: number | string;
-  emptyImgHeightMD: number;
+  emptyImgHeightMD: number | string;
 }

 // ============================== Shared ==============================
--- a/components/form/FormItemLabel.tsx
+++ b/components/form/FormItemLabel.tsx
@ -93,8 +93,8 @@ const FormItemLabel: React.FC<FormItemLabelProps & { required?: boolean; prefixC
  const haveColon = computedColon && !vertical;

  // Remove duplicated user input colon
-  if (haveColon && typeof label === 'string' && (label as string).trim() !== '') {
-    labelChildren = (label as string).replace(/[:|：]\s*$/, '');
+  if (haveColon && typeof label === 'string' && label.trim()) {
+    labelChildren = label.replace(/[:|：]\s*$/, '');
  }

  // Tooltip
--- a/components/form/style/index.ts
+++ b/components/form/style/index.ts
@ -29,7 +29,7 @@ export interface ComponentToken {
   * @desc 标签高度
   * @descEN Label height
   */
-  labelHeight: number;
+  labelHeight: number | string;
  /**
   * @desc 标签冒号前间距
   * @descEN Label colon margin-inline-start
--- a/components/image/demo/toolbarRender.tsx
+++ b/components/image/demo/toolbarRender.tsx
@ -12,58 +12,49 @@ import { Image, Space } from 'antd';

 const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';

-const App: React.FC = () => {
-  // or you can download flipped and rotated image
-  // https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp
-  const onDownload = () => {
-    fetch(src)
-      .then((response) => response.blob())
-      .then((blob) => {
-        const url = URL.createObjectURL(new Blob([blob]));
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = 'image.png';
-        document.body.appendChild(link);
-        link.click();
-        URL.revokeObjectURL(url);
-        link.remove();
-      });
-  };
-
-  return (
-    <Image
-      width={200}
-      src={src}
-      preview={{
-        toolbarRender: (
-          _,
-          {
-            transform: { scale },
-            actions: {
-              onFlipY,
-              onFlipX,
-              onRotateLeft,
-              onRotateRight,
-              onZoomOut,
-              onZoomIn,
-              onReset,
-            },
-          },
-        ) => (
-          <Space size={12} className="toolbar-wrapper">
-            <DownloadOutlined onClick={onDownload} />
-            <SwapOutlined rotate={90} onClick={onFlipY} />
-            <SwapOutlined onClick={onFlipX} />
-            <RotateLeftOutlined onClick={onRotateLeft} />
-            <RotateRightOutlined onClick={onRotateRight} />
-            <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
-            <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
-            <UndoOutlined onClick={onReset} />
-          </Space>
-        ),
-      }}
-    />
-  );
+// you can download flipped and rotated image
+// https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp
+const onDownload = (imgUrl: string) => {
+  fetch(imgUrl)
+    .then((response) => response.blob())
+    .then((blob) => {
+      const url = URL.createObjectURL(new Blob([blob]));
+      const link = document.createElement<'a'>('a');
+      link.href = url;
+      link.download = 'image.png';
+      document.body.appendChild(link);
+      link.click();
+      URL.revokeObjectURL(url);
+      link.remove();
+    });
 };

+const App: React.FC = () => (
+  <Image
+    width={200}
+    src={src}
+    preview={{
+      toolbarRender: (
+        _,
+        {
+          image: { url },
+          transform: { scale },
+          actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn, onReset },
+        },
+      ) => (
+        <Space size={12} className="toolbar-wrapper">
+          <DownloadOutlined onClick={() => onDownload(url)} />
+          <SwapOutlined rotate={90} onClick={onFlipY} />
+          <SwapOutlined onClick={onFlipX} />
+          <RotateLeftOutlined onClick={onRotateLeft} />
+          <RotateRightOutlined onClick={onRotateRight} />
+          <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
+          <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
+          <UndoOutlined onClick={onReset} />
+        </Space>
+      ),
+    }}
+  />
+);
+
 export default App;
--- a/components/input/demo/otp.tsx
+++ b/components/input/demo/otp.tsx
@ -1,12 +1,13 @@
 import React from 'react';
 import { Flex, Input, Typography } from 'antd';
-import type { GetProp } from 'antd';
-import type { OTPProps } from 'antd/es/input/OTP';
+import type { GetProps } from 'antd';
+
+type OTPProps = GetProps<typeof Input.OTP>;

 const { Title } = Typography;

 const App: React.FC = () => {
-  const onChange: GetProp<typeof Input.OTP, 'onChange'> = (text) => {
+  const onChange: OTPProps['onChange'] = (text) => {
    console.log('onChange:', text);
  };

--- a/components/input/demo/search-input.tsx
+++ b/components/input/demo/search-input.tsx
@ -1,7 +1,9 @@
 import React from 'react';
 import { AudioOutlined } from '@ant-design/icons';
 import { Input, Space } from 'antd';
-import type { SearchProps } from 'antd/es/input/Search';
+import type { GetProps } from 'antd';
+
+type SearchProps = GetProps<typeof Input.Search>;

 const { Search } = Input;

--- a/components/layout/style/index.ts
+++ b/components/layout/style/index.ts
@ -28,7 +28,7 @@ export interface ComponentToken {
   * @desc 顶部高度
   * @descEN Height of header
   */
-  headerHeight: number;
+  headerHeight: number | string;
  /**
   * @desc 顶部内边距
   * @descEN Padding of header
@ -58,7 +58,7 @@ export interface ComponentToken {
   * @desc 侧边栏开关高度
   * @descEN Height of sider trigger
   */
-  triggerHeight: number;
+  triggerHeight: number | string;
  /**
   * @desc 侧边栏开关背景色
   * @descEN Background Color of sider trigger
--- a/components/list/style/index.ts
+++ b/components/list/style/index.ts
@ -11,7 +11,7 @@ export interface ComponentToken {
   * @desc 内容宽度
   * @descEN Width of content
   */
-  contentWidth: number;
+  contentWidth: number | string;
  /**
   * @desc 大号列表项内间距
   * @descEN Padding of large item
@ -66,7 +66,7 @@ export interface ComponentToken {

 interface ListToken extends FullToken<'List'> {
  listBorderedCls: string;
-  minHeight: number;
+  minHeight: number | string;
 }

 const genBorderedStyle = (token: ListToken): CSSObject => {
--- a/components/mentions/style/index.ts
+++ b/components/mentions/style/index.ts
@ -27,12 +27,12 @@ export interface ComponentToken extends SharedComponentToken {
   * @desc 弹层高度
   * @descEN Height of popup
   */
-  dropdownHeight: number;
+  dropdownHeight: number | string;
  /**
   * @desc 菜单项高度
   * @descEN Height of menu item
   */
-  controlItemWidth: number;
+  controlItemWidth: number | string;
 }

 type MentionsToken = FullToken<'Mentions'> &
--- a/components/menu/style/index.ts
+++ b/components/menu/style/index.ts
@ -19,7 +19,7 @@ export interface ComponentToken {
   * @desc 弹出菜单的宽度
   * @descEN Width of popup menu
   */
-  dropdownWidth: number;
+  dropdownWidth: number | string;
  /**
   * @desc 弹出菜单的 z-index
   * @descEN z-index of popup menu
@ -205,12 +205,12 @@ export interface ComponentToken {

  // Ink Bar
  /** @deprecated Use `activeBarWidth` instead */
-  colorActiveBarWidth: number;
+  colorActiveBarWidth: number | string;
  /**
   * @desc 菜单项指示条宽度
   * @descEN Width of menu item active bar
   */
-  activeBarWidth: number;
+  activeBarWidth: number | string;

  /** @deprecated Use `activeBarHeight` instead */
  colorActiveBarHeight: number;
@ -226,7 +226,7 @@ export interface ComponentToken {
   * @desc 菜单项指示条边框宽度
   * @descEN Border width of menu item active bar
   */
-  activeBarBorderWidth: number;
+  activeBarBorderWidth: number | string;

  /**
   * @desc 菜单项横向外间距
@ -247,12 +247,12 @@ export interface ComponentToken {
   * @desc 菜单项高度
   * @descEN Height of menu item
   */
-  itemHeight: number;
+  itemHeight: number | string;
  /**
   * @desc 收起后的宽度
   * @descEN Width when collapsed
   */
-  collapsedWidth: number;
+  collapsedWidth: number | string;
  /**
   * @desc 弹出框背景色
   * @descEN Background color of popup
@ -366,7 +366,7 @@ export interface ComponentToken {
   */
  darkDangerItemActiveBg: string;
  /** @internal */
-  itemWidth: string;
+  itemWidth: number | string;
 }

 export interface MenuToken extends FullToken<'Menu'> {
--- a/components/modal/style/index.ts
+++ b/components/modal/style/index.ts
@ -20,7 +20,7 @@ export interface ComponentToken {
   * @desc 标题行高
   * @descEN Line height of title
   */
-  titleLineHeight: number;
+  titleLineHeight: number | string;
  /**
   * @desc 标题字体大小
   * @descEN Font size of title
@ -73,7 +73,7 @@ export interface ModalToken extends FullToken<'Modal'> {
  modalHeaderHeight: number | string;
  modalFooterBorderColorSplit: string;
  modalFooterBorderStyle: string;
-  modalFooterBorderWidth: number;
+  modalFooterBorderWidth: number | string;
  modalCloseIconColor: string;
  modalCloseIconHoverColor: string;
  modalCloseBtnSize: number | string;
--- a/components/notification/style/index.ts
+++ b/components/notification/style/index.ts
@ -20,11 +20,11 @@ export interface ComponentToken {
   * @desc 提醒框宽度
   * @descEN Width of Notification
   */
-  width: number;
+  width: number | string;
 }

 export interface NotificationToken extends FullToken<'Notification'> {
-  animationMaxHeight: number;
+  animationMaxHeight: number | string;
  notificationBg: string;
  notificationPadding: string;
  notificationPaddingVertical: number;
--- a/components/popconfirm/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/popconfirm/tests/snapshots/demo-extend.test.ts.snap
@ -2138,6 +2138,105 @@ Array [

 exports[`renders components/popconfirm/demo/render-panel.tsx extend context correctly 2`] = `[]`;

+exports[`renders components/popconfirm/demo/shift.tsx extend context correctly 1`] = `
+<div
+  style="width: 300vw; height: 300vh; display: flex; align-items: center; justify-content: center;"
+>
+  <button
+    class="ant-btn ant-btn-primary ant-popover-open"
+    type="button"
+  >
+    <span>
+      Scroll The Window
+    </span>
+  </button>
+  <div
+    class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popconfirm ant-popover-placement-top"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+  >
+    <div
+      class="ant-popover-arrow"
+      style="position: absolute; bottom: 0px; left: 0px;"
+    />
+    <div
+      class="ant-popover-content"
+    >
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popover-inner-content"
+        >
+          <div
+            class="ant-popconfirm-inner-content"
+          >
+            <div
+              class="ant-popconfirm-message"
+            >
+              <span
+                class="ant-popconfirm-message-icon"
+              >
+                <span
+                  aria-label="exclamation-circle"
+                  class="anticon anticon-exclamation-circle"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="exclamation-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <div
+                class="ant-popconfirm-message-text"
+              >
+                <div
+                  class="ant-popconfirm-title"
+                >
+                  Thanks for using antd. Have a nice day !
+                </div>
+              </div>
+            </div>
+            <div
+              class="ant-popconfirm-buttons"
+            >
+              <button
+                class="ant-btn ant-btn-default ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  Cancel
+                </span>
+              </button>
+              <button
+                class="ant-btn ant-btn-primary ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  OK
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders components/popconfirm/demo/shift.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/popconfirm/demo/wireframe.tsx extend context correctly 1`] = `
 Array [
  <div
--- a/components/popconfirm/tests/snapshots/demo.test.tsx.snap
+++ b/components/popconfirm/tests/snapshots/demo.test.tsx.snap
@ -518,6 +518,103 @@ Array [
 ]
 `;

+exports[`renders components/popconfirm/demo/shift.tsx correctly 1`] = `
+<div
+  style="width:300vw;height:300vh;display:flex;align-items:center;justify-content:center"
+>
+  <button
+    class="ant-btn ant-btn-primary ant-popover-open"
+    type="button"
+  >
+    <span>
+      Scroll The Window
+    </span>
+  </button>
+  <div
+    class="ant-popover ant-popconfirm ant-popover-placement-top"
+    style="--arrow-x:0px;--arrow-y:0px;left:-1000vw;top:-1000vh;right:auto;bottom:auto;box-sizing:border-box"
+  >
+    <div
+      class="ant-popover-arrow"
+      style="position:absolute;bottom:0;left:0"
+    />
+    <div
+      class="ant-popover-content"
+    >
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popover-inner-content"
+        >
+          <div
+            class="ant-popconfirm-inner-content"
+          >
+            <div
+              class="ant-popconfirm-message"
+            >
+              <span
+                class="ant-popconfirm-message-icon"
+              >
+                <span
+                  aria-label="exclamation-circle"
+                  class="anticon anticon-exclamation-circle"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="exclamation-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <div
+                class="ant-popconfirm-message-text"
+              >
+                <div
+                  class="ant-popconfirm-title"
+                >
+                  Thanks for using antd. Have a nice day !
+                </div>
+              </div>
+            </div>
+            <div
+              class="ant-popconfirm-buttons"
+            >
+              <button
+                class="ant-btn ant-btn-default ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  Cancel
+                </span>
+              </button>
+              <button
+                class="ant-btn ant-btn-primary ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  OK
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/popconfirm/demo/wireframe.tsx correctly 1`] = `
 Array [
  <div
--- a/components/popconfirm/tests/demo-extend.test.ts
+++ b/components/popconfirm/tests/demo-extend.test.ts
@ -1,3 +1,5 @@
 import { extendTest } from '../../../tests/shared/demoTest';

-extendTest('popconfirm');
+extendTest('popconfirm', {
+  skip: ['shift.tsx'],
+});
--- a/components/popconfirm/tests/demo.test.tsx
+++ b/components/popconfirm/tests/demo.test.tsx
@ -4,6 +4,7 @@ import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';

 demoTest('popconfirm', {
  testRootProps: false,
+  skip: ['shift.tsx'],
 });

 rootPropsTest(
--- a/components/popconfirm/tests/image.test.ts
+++ b/components/popconfirm/tests/image.test.ts
@ -1,5 +1,7 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';

 describe('Popconfirm image', () => {
-  imageDemoTest('popconfirm');
+  imageDemoTest('popconfirm', {
+    onlyViewport: ['shift.tsx'],
+  });
 });
--- a/components/popconfirm/demo/shift.md
+++ b/components/popconfirm/demo/shift.md
@ -0,0 +1,7 @@
+## zh-CN
+
+当 Popconfirm 贴边时，自动偏移并且调整箭头位置。当超出过多时，则一同滚出屏幕。
+
+## en-US
+
+Auto adjust Popup and arrow position when Popconfirm is close to the edge of the screen. Will be out of screen when exceed limitation.
--- a/components/popconfirm/demo/shift.tsx
+++ b/components/popconfirm/demo/shift.tsx
@ -0,0 +1,26 @@
+import React from 'react';
+import { Button, Popconfirm } from 'antd';
+
+const style: React.CSSProperties = {
+  width: '300vw',
+  height: '300vh',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+const App: React.FC = () => {
+  React.useEffect(() => {
+    document.documentElement.scrollTop = document.documentElement.clientHeight;
+    document.documentElement.scrollLeft = document.documentElement.clientWidth;
+  }, []);
+  return (
+    <div style={style}>
+      <Popconfirm title="Thanks for using antd. Have a nice day !" open>
+        <Button type="primary">Scroll The Window</Button>
+      </Popconfirm>
+    </div>
+  );
+};
+
+export default App;
--- a/components/popconfirm/index.en-US.md
+++ b/components/popconfirm/index.en-US.md
@ -21,6 +21,7 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/locale.tsx">Locale text</code>
 <code src="./demo/placement.tsx">Placement</code>
+<code src="./demo/shift.tsx" iframe="300">Auto Shift</code>
 <code src="./demo/dynamic-trigger.tsx">Conditional trigger</code>
 <code src="./demo/icon.tsx">Customize icon</code>
 <code src="./demo/async.tsx">Asynchronously close</code>
--- a/components/popconfirm/index.zh-CN.md
+++ b/components/popconfirm/index.zh-CN.md
@ -22,6 +22,7 @@ demo:
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/locale.tsx">国际化</code>
 <code src="./demo/placement.tsx">位置</code>
+<code src="./demo/shift.tsx" iframe="300">贴边偏移</code>
 <code src="./demo/dynamic-trigger.tsx">条件触发</code>
 <code src="./demo/icon.tsx">自定义 Icon 图标</code>
 <code src="./demo/async.tsx">异步关闭</code>
--- a/components/popover/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/popover/tests/snapshots/demo-extend.test.ts.snap
@ -1533,6 +1533,46 @@ Array [

 exports[`renders components/popover/demo/render-panel.tsx extend context correctly 2`] = `[]`;

+exports[`renders components/popover/demo/shift.tsx extend context correctly 1`] = `
+<div
+  style="width: 300vw; height: 300vh; display: flex; align-items: center; justify-content: center;"
+>
+  <button
+    class="ant-btn ant-btn-primary ant-popover-open"
+    type="button"
+  >
+    <span>
+      Scroll The Window
+    </span>
+  </button>
+  <div
+    class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+  >
+    <div
+      class="ant-popover-arrow"
+      style="position: absolute; bottom: 0px; left: 0px;"
+    />
+    <div
+      class="ant-popover-content"
+    >
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popover-inner-content"
+        >
+          Thanks for using antd. Have a nice day !
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders components/popover/demo/shift.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/popover/demo/triggerType.tsx extend context correctly 1`] = `
 <div
  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
--- a/components/popover/tests/snapshots/demo.test.tsx.snap
+++ b/components/popover/tests/snapshots/demo.test.tsx.snap
@ -495,6 +495,44 @@ Array [
 ]
 `;

+exports[`renders components/popover/demo/shift.tsx correctly 1`] = `
+<div
+  style="width:300vw;height:300vh;display:flex;align-items:center;justify-content:center"
+>
+  <button
+    class="ant-btn ant-btn-primary ant-popover-open"
+    type="button"
+  >
+    <span>
+      Scroll The Window
+    </span>
+  </button>
+  <div
+    class="ant-popover ant-popover-placement-top"
+    style="--arrow-x:0px;--arrow-y:0px;left:-1000vw;top:-1000vh;right:auto;bottom:auto;box-sizing:border-box"
+  >
+    <div
+      class="ant-popover-arrow"
+      style="position:absolute;bottom:0;left:0"
+    />
+    <div
+      class="ant-popover-content"
+    >
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popover-inner-content"
+        >
+          Thanks for using antd. Have a nice day !
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/popover/demo/triggerType.tsx correctly 1`] = `
 <div
  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
--- a/components/popover/tests/demo-extend.test.ts
+++ b/components/popover/tests/demo-extend.test.ts
@ -1,3 +1,5 @@
 import { extendTest } from '../../../tests/shared/demoTest';

-extendTest('popover');
+extendTest('popover', {
+  skip: ['shift.tsx'],
+});
--- a/components/popover/tests/demo.test.tsx
+++ b/components/popover/tests/demo.test.tsx
@ -4,6 +4,7 @@ import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';

 demoTest('popover', {
  testRootProps: false,
+  skip: ['shift.tsx'],
 });

 rootPropsTest(
--- a/components/popover/tests/image.test.ts
+++ b/components/popover/tests/image.test.ts
@ -1,5 +1,7 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';

 describe('Popover image', () => {
-  imageDemoTest('popover');
+  imageDemoTest('popover', {
+    onlyViewport: ['shift.tsx'],
+  });
 });
--- a/components/popover/demo/shift.md
+++ b/components/popover/demo/shift.md
@ -0,0 +1,7 @@
+## zh-CN
+
+当 Popover 贴边时，自动偏移并且调整箭头位置。当超出过多时，则一同滚出屏幕。
+
+## en-US
+
+Auto adjust Popup and arrow position when Popover is close to the edge of the screen. Will be out of screen when exceed limitation.
--- a/components/popover/demo/shift.tsx
+++ b/components/popover/demo/shift.tsx
@ -0,0 +1,26 @@
+import React from 'react';
+import { Button, Popover } from 'antd';
+
+const style: React.CSSProperties = {
+  width: '300vw',
+  height: '300vh',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+const App: React.FC = () => {
+  React.useEffect(() => {
+    document.documentElement.scrollTop = document.documentElement.clientHeight;
+    document.documentElement.scrollLeft = document.documentElement.clientWidth;
+  }, []);
+  return (
+    <div style={style}>
+      <Popover content="Thanks for using antd. Have a nice day !" open>
+        <Button type="primary">Scroll The Window</Button>
+      </Popover>
+    </div>
+  );
+};
+
+export default App;
--- a/components/popover/index.en-US.md
+++ b/components/popover/index.en-US.md
@ -22,6 +22,7 @@ Comparing with `Tooltip`, besides information `Popover` card can also provide ac
 <code src="./demo/triggerType.tsx">Three ways to trigger</code>
 <code src="./demo/placement.tsx">Placement</code>
 <code src="./demo/arrow.tsx">Arrow</code>
+<code src="./demo/shift.tsx" iframe="300">Auto Shift</code>
 <code src="./demo/control.tsx">Controlling the close of the dialog</code>
 <code src="./demo/hover-with-click.tsx">Hover with click popover</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
--- a/components/popover/index.zh-CN.md
+++ b/components/popover/index.zh-CN.md
@ -23,6 +23,7 @@ demo:
 <code src="./demo/triggerType.tsx">三种触发方式</code>
 <code src="./demo/placement.tsx">位置</code>
 <code src="./demo/arrow.tsx">箭头展示</code>
+<code src="./demo/shift.tsx" iframe="300">贴边偏移</code>
 <code src="./demo/control.tsx">从浮层内关闭</code>
 <code src="./demo/hover-with-click.tsx">悬停点击弹出窗口</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
--- a/components/popover/style/index.ts
+++ b/components/popover/style/index.ts
@ -18,18 +18,18 @@ export interface ComponentToken extends ArrowToken, ArrowOffsetToken {
   * @desc 气泡卡片宽度
   * @descEN Width of Popover
   */
-  width?: number;
+  width?: number | string;
  /**
   * @deprecated Please use `titleMinWidth` instead
   * @desc 气泡卡片最小宽度
   * @descEN Min width of Popover
   */
-  minWidth?: number;
+  minWidth?: number | string;
  /**
   * @desc 气泡卡片标题最小宽度
   * @descEN Min width of Popover title
   */
-  titleMinWidth: number;
+  titleMinWidth: number | string;
  /**
   * @desc 气泡卡片 z-index
   * @descEN z-index of Popover
--- a/components/result/style/index.ts
+++ b/components/result/style/index.ts
@ -29,8 +29,8 @@ export interface ComponentToken {
 }

 interface ResultToken extends FullToken<'Result'> {
-  imageWidth: number;
-  imageHeight: number;
+  imageWidth: number | string;
+  imageHeight: number | string;
  resultInfoIconColor: string;
  resultSuccessIconColor: string;
  resultWarningIconColor: string;
--- a/components/skeleton/style/index.ts
+++ b/components/skeleton/style/index.ts
@ -24,7 +24,7 @@ export type ComponentToken = {
   * @desc 标题骨架屏高度
   * @descEN Height of title skeleton
   */
-  titleHeight: number;
+  titleHeight: number | string;
  /**
   * @desc 骨架屏圆角
   * @descEN Border radius of skeleton
--- a/components/slider/style/index.ts
+++ b/components/slider/style/index.ts
@ -38,12 +38,12 @@ export interface ComponentToken {
   * @desc 滑块边框宽度
   * @descEN Border width of handle
   */
-  handleLineWidth: number;
+  handleLineWidth: number | string;
  /**
   * @desc 滑块边框宽度（悬浮态）
   * @descEN Border width of handle when hover
   */
-  handleLineWidthHover: number;
+  handleLineWidthHover: number | string;
  /**
   * @desc 滑块圆点尺寸
   * @descEN Size of dot
--- a/components/spin/style/index.ts
+++ b/components/spin/style/index.ts
@ -10,7 +10,7 @@ export interface ComponentToken {
   * @desc 内容区域高度
   * @descEN Height of content area
   */
-  contentHeight: number;
+  contentHeight: number | string;
  /**
   * @desc 加载图标尺寸
   * @descEN Loading icon size
--- a/components/steps/style/index.ts
+++ b/components/steps/style/index.ts
@ -81,7 +81,7 @@ export interface ComponentToken {
   * @desc 标题行高
   * @descEN Line height of title
   */
-  titleLineHeight: number;
+  titleLineHeight: number | string;
  /**
   * @internal
   */
--- a/components/switch/style/index.ts
+++ b/components/switch/style/index.ts
@ -11,22 +11,22 @@ export interface ComponentToken {
   *  @desc 开关高度
   *  @descEN Height of Switch
   */
-  trackHeight: number;
+  trackHeight: number | string;
  /**
   * @desc 小号开关高度
   * @descEN Height of small Switch
   */
-  trackHeightSM: number;
+  trackHeightSM: number | string;
  /**
   * @desc 开关最小宽度
   * @descEN Minimum width of Switch
   */
-  trackMinWidth: number;
+  trackMinWidth: number | string;
  /**
   * @desc 小号开关最小宽度
   * @descEN Minimum width of small Switch
   */
-  trackMinWidthSM: number;
+  trackMinWidthSM: number | string;
  /**
   * @desc 开关内边距
   * @descEN Padding of Switch
--- a/components/table/demo/drag-sorting-handler.tsx
+++ b/components/table/demo/drag-sorting-handler.tsx
@ -12,7 +12,7 @@ import {
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Button, Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';

 interface DataType {
  key: string;
@ -42,7 +42,7 @@ const DragHandle: React.FC = () => {
  );
 };

-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
  { key: 'sort', align: 'center', width: 80, render: () => <DragHandle /> },
  { title: 'Name', dataIndex: 'name' },
  { title: 'Age', dataIndex: 'age' },
--- a/components/table/demo/drag-sorting.tsx
+++ b/components/table/demo/drag-sorting.tsx
@ -10,7 +10,7 @@ import {
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';

 interface DataType {
  key: string;
@ -19,7 +19,7 @@ interface DataType {
  address: string;
 }

-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
  {
    title: 'Name',
    dataIndex: 'name',
--- a/components/table/demo/row-selection-and-operation.tsx
+++ b/components/table/demo/row-selection-and-operation.tsx
@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { Button, Flex, Table } from 'antd';
-import type { TableColumnsType } from 'antd';
-import type { TableRowSelection } from 'antd/es/table/interface';
+import type { TableColumnsType, TableProps } from 'antd';
+
+type TableRowSelection<T> = TableProps<T>['rowSelection'];

 interface DataType {
  key: React.Key;
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@ -305,14 +305,14 @@ Properties for row selection.
 ```tsx
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';

 interface User {
  key: number;
  name: string;
 }

-const columns: ColumnsType<User> = [
+const columns: TableColumnsType<User> = [
  {
    key: 'name',
    title: 'Name',
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@ -307,14 +307,14 @@ const columns = [
 ```tsx
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';

 interface User {
  key: number;
  name: string;
 }

-const columns: ColumnsType<User> = [
+const columns: TableColumnsType<User> = [
  {
    key: 'name',
    title: 'Name',
--- a/components/table/style/expand.ts
+++ b/components/table/style/expand.ts
@ -132,7 +132,7 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {

          table: {
            flex: 'auto',
-            width: 'auto',
+            width: '100%',
          },
        },
      },
--- a/components/table/style/index.ts
+++ b/components/table/style/index.ts
@ -166,7 +166,7 @@ export interface ComponentToken {
   * @desc 选择列宽度
   * @descEN Width of selection column
   */
-  selectionColumnWidth: number;
+  selectionColumnWidth: number | string;
  /**
   * @desc Sticky 模式下滚动条背景色
   * @descEN Background of sticky scrollbar
@ -214,14 +214,14 @@ export interface TableToken extends FullToken<'Table'> {
  tableFixedHeaderSortActiveBg: string;
  tableHeaderFilterActiveBg: string;
  tableFilterDropdownBg: string;
-  tableFilterDropdownHeight: number;
+  tableFilterDropdownHeight: number | string;
  tableRowHoverBg: string;
  tableSelectedRowBg: string;
  tableSelectedRowHoverBg: string;

  tableFontSizeMiddle: number;
  tableFontSizeSmall: number;
-  tableSelectionColumnWidth: number;
+  tableSelectionColumnWidth: number | string;
  tableExpandIconBg: string;
  tableExpandColumnWidth: number | string;
  tableExpandedRowBg: string;
--- a/components/tabs/style/index.ts
+++ b/components/tabs/style/index.ts
@ -21,7 +21,7 @@ export interface ComponentToken {
   * @desc 卡片标签页高度
   * @descEN Height of card tab
   */
-  cardHeight: number;
+  cardHeight: number | string;
  /**
   * @desc 卡片标签页内间距
   * @descEN Padding of card tab
@ -134,8 +134,8 @@ export interface TabsToken extends FullToken<'Tabs'> {
  dropdownEdgeChildVerticalPadding: number;
  tabsNavWrapPseudoWidth: number;
  tabsActiveTextShadow: string;
-  tabsDropdownHeight: number;
-  tabsDropdownWidth: number;
+  tabsDropdownHeight: number | string;
+  tabsDropdownWidth: number | string;
  tabsHorizontalItemMargin: string;
  tabsHorizontalItemMarginRTL: string;
 }
--- a/components/timeline/style/index.ts
+++ b/components/timeline/style/index.ts
@ -15,12 +15,12 @@ export interface ComponentToken {
   * @desc 轨迹宽度
   * @descEN Line width
   */
-  tailWidth: number;
+  tailWidth: number | string;
  /**
   * @desc 节点边框宽度
   * @descEN Border width of node
   */
-  dotBorderWidth: number;
+  dotBorderWidth: number | string;
  /**
   * @desc 节点背景色
   * @descEN Background color of node
--- a/components/tooltip/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/tooltip/tests/snapshots/demo-extend.test.ts.snap
@ -1355,7 +1355,7 @@ exports[`renders components/tooltip/demo/disabled-children.tsx extend context co
          class="ant-tooltip-inner"
          role="tooltip"
        >
-          Thanks for using antd. Have a nice day!
+          Thanks for using antd. Have a nice day !
        </div>
      </div>
    </div>
@ -1385,7 +1385,7 @@ exports[`renders components/tooltip/demo/disabled-children.tsx extend context co
          class="ant-tooltip-inner"
          role="tooltip"
        >
-          Thanks for using antd. Have a nice day!
+          Thanks for using antd. Have a nice day !
        </div>
      </div>
    </div>
@ -1482,7 +1482,7 @@ exports[`renders components/tooltip/demo/disabled-children.tsx extend context co
          class="ant-tooltip-inner"
          role="tooltip"
        >
-          Thanks for using antd. Have a nice day!
+          Thanks for using antd. Have a nice day !
        </div>
      </div>
    </div>
@ -1521,7 +1521,7 @@ exports[`renders components/tooltip/demo/disabled-children.tsx extend context co
          class="ant-tooltip-inner"
          role="tooltip"
        >
-          Thanks for using antd. Have a nice day!
+          Thanks for using antd. Have a nice day !
        </div>
      </div>
    </div>
@ -1663,7 +1663,7 @@ exports[`renders components/tooltip/demo/disabled-children.tsx extend context co
          class="ant-tooltip-inner"
          role="tooltip"
        >
-          Thanks for using antd. Have a nice day!
+          Thanks for using antd. Have a nice day !
        </div>
      </div>
    </div>
--- a/components/tooltip/demo/debug.tsx
+++ b/components/tooltip/demo/debug.tsx
@ -4,7 +4,7 @@ import { Button, Tooltip } from 'antd';
 const App: React.FC = () => (
  <Tooltip
    open
-    title="Thanks for using antd. Have a nice day!"
+    title="Thanks for using antd. Have a nice day !"
    arrow={{ pointAtCenter: true }}
    placement="topLeft"
  >
--- a/components/tooltip/demo/disabled-children.tsx
+++ b/components/tooltip/demo/disabled-children.tsx
@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Checkbox, Input, InputNumber, Select, Space, Tooltip } from 'antd';

 const WrapperTooltip: React.FC<React.PropsWithChildren> = (props) => (
-  <Tooltip title="Thanks for using antd. Have a nice day!" {...props} />
+  <Tooltip title="Thanks for using antd. Have a nice day !" {...props} />
 );

 const App: React.FC = () => (
--- a/components/tooltip/demo/shift.tsx
+++ b/components/tooltip/demo/shift.tsx
@ -1,27 +1,24 @@
 import React from 'react';
 import { Button, Tooltip } from 'antd';

+const style: React.CSSProperties = {
+  width: '300vw',
+  height: '300vh',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
 const App: React.FC = () => {
  React.useEffect(() => {
    document.documentElement.scrollTop = document.documentElement.clientHeight;
    document.documentElement.scrollLeft = document.documentElement.clientWidth;
  }, []);
-
  return (
-    <div>
-      <div
-        style={{
-          width: '300vw',
-          height: '300vh',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <Tooltip title="Thanks for using antd. Have a nice day!" trigger="click" open>
-          <Button>Scroll The Window</Button>
-        </Tooltip>
-      </div>
+    <div style={style}>
+      <Tooltip title="Thanks for using antd. Have a nice day !" open>
+        <Button type="primary">Scroll The Window</Button>
+      </Tooltip>
    </div>
  );
 };
--- a/components/tooltip/index.en-US.md
+++ b/components/tooltip/index.en-US.md
@ -20,7 +20,7 @@ demo:
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/placement.tsx">Placement</code>
 <code src="./demo/arrow.tsx">Arrow</code>
-<code src="./demo/shift.tsx" iframe="200">Auto Shift</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/colorful.tsx">Colorful Tooltip</code>
--- a/components/tooltip/index.zh-CN.md
+++ b/components/tooltip/index.zh-CN.md
@ -22,7 +22,7 @@ demo:
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/placement.tsx">位置</code>
 <code src="./demo/arrow.tsx">箭头展示</code>
-<code src="./demo/shift.tsx" iframe="200">贴边偏移</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/colorful.tsx">多彩文字提示</code>
--- a/components/tour/style/index.ts
+++ b/components/tour/style/index.ts
@ -37,8 +37,8 @@ export interface ComponentToken extends ArrowOffsetToken, ArrowToken {

 interface TourToken extends FullToken<'Tour'> {
  tourZIndexPopup: number;
-  indicatorWidth: number;
-  indicatorHeight: number;
+  indicatorWidth: number | string;
+  indicatorHeight: number | string;
  tourBorderRadius: number;
 }

--- a/components/transfer/style/index.ts
+++ b/components/transfer/style/index.ts
@ -10,32 +10,32 @@ export interface ComponentToken {
   * @desc 列表宽度
   * @descEN Width of list
   */
-  listWidth: number;
+  listWidth: number | string;
  /**
   * @desc 大号列表宽度
   * @descEN Width of large list
   */
-  listWidthLG: number;
+  listWidthLG: number | string;
  /**
   * @desc 列表高度
   * @descEN Height of list
   */
-  listHeight: number;
+  listHeight: number | string;
  /**
   * @desc 列表项高度
   * @descEN Height of list item
   */
-  itemHeight: number;
+  itemHeight: number | string;
  /**
   * @desc 列表项纵向内边距
   * @descEN Vertical padding of list item
   */
-  itemPaddingBlock: number;
+  itemPaddingBlock: number | string;
  /**
   * @desc 顶部高度
   * @descEN Height of header
   */
-  headerHeight: number;
+  headerHeight: number | string;
 }

 interface TransferToken extends FullToken<'Transfer'> {
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@ -264,10 +264,10 @@ const InternalTreeSelect = <
    hashId,
  );

-  const renderSwitcherIcon = (nodeProps: AntTreeNodeProps) => (
+  const renderSwitcherIcon: React.FC<AntTreeNodeProps> = (nodeProps) => (
    <SwitcherIconCom
      prefixCls={treePrefixCls}
-      switcherIcon={switcherIcon as any}
+      switcherIcon={switcherIcon as SwitcherIcon}
      treeNodeProps={nodeProps}
      showLine={treeLine}
    />
@ -297,8 +297,8 @@ const InternalTreeSelect = <
      placement={memoizedPlacement}
      removeIcon={removeIcon}
      allowClear={mergedAllowClear}
-      switcherIcon={renderSwitcherIcon as any}
-      showTreeIcon={treeIcon as any}
+      switcherIcon={renderSwitcherIcon as RcTreeSelectProps['switcherIcon']}
+      showTreeIcon={treeIcon as boolean}
      notFoundContent={mergedNotFound}
      getPopupContainer={getPopupContainer || getContextPopupContainer}
      treeMotion={null}
--- a/components/tree/DirectoryTree.tsx
+++ b/components/tree/DirectoryTree.tsx
@ -120,7 +120,7 @@ const DirectoryTree: React.ForwardRefRenderFunction<RcTree, DirectoryTreeProps>
    // const newState: DirectoryTreeState = {};

    // We need wrap this event since some value is not same
-    const newEvent: any = {
+    const newEvent = {
      ...event,
      selected: true, // Directory selected always true
    };
--- a/components/tree/Tree.tsx
+++ b/components/tree/Tree.tsx
@ -103,7 +103,7 @@ export type TreeNodeNormal = DataNode;
 type DraggableFn = (node: DataNode) => boolean;

 interface DraggableConfig {
-  icon?: React.ReactNode | false;
+  icon?: React.ReactNode;
  nodeDraggable?: DraggableFn;
 }

@ -224,10 +224,10 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
    return mergedDraggable;
  }, [draggable]);

-  const renderSwitcherIcon = (nodeProps: AntTreeNodeProps) => (
+  const renderSwitcherIcon: React.FC<AntTreeNodeProps> = (nodeProps) => (
    <SwitcherIconCom
      prefixCls={prefixCls}
-      switcherIcon={switcherIcon as any}
+      switcherIcon={switcherIcon as SwitcherIcon}
      treeNodeProps={nodeProps}
      showLine={showLine}
    />
@ -258,7 +258,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
      direction={direction}
      checkable={checkable ? <span className={`${prefixCls}-checkbox-inner`} /> : checkable}
      selectable={selectable}
-      switcherIcon={renderSwitcherIcon as any}
+      switcherIcon={renderSwitcherIcon as RcTreeProps['switcherIcon']}
      draggable={draggableConfig}
    >
      {children}
--- a/components/typography/index.en-US.md
+++ b/components/typography/index.en-US.md
@ -108,7 +108,7 @@ Common props ref：[Common props](/docs/react/common-props)

    {
      icon: ReactNode,
-      tooltip: boolean | ReactNode,
+      tooltip: ReactNode,
      editing: boolean,
      maxLength: number,
      autoSize: boolean | { minRows: number, maxRows: number },
@ -148,7 +148,7 @@ interface EllipsisConfig {
  suffix: string;
  /** render function added in `5.16.0` */
  symbol: ReactNode | ((expanded: boolean) => ReactNode);
-  tooltip: boolean | ReactNode | TooltipProps;
+  tooltip: ReactNode | TooltipProps;
  /** added in `5.16.0` */
  defaultExpanded: boolean;
  /** added in `5.16.0` */
--- a/components/typography/index.zh-CN.md
+++ b/components/typography/index.zh-CN.md
@ -109,7 +109,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA

    {
      icon: ReactNode,
-      tooltip: boolean | ReactNode,
+      tooltip: ReactNode,
      editing: boolean,
      maxLength: number,
      autoSize: boolean | { minRows: number, maxRows: number },
@ -149,7 +149,7 @@ interface EllipsisConfig {
  suffix: string;
  /** `5.16.0` 新增渲染函数 */
  symbol: ReactNode | ((expanded: boolean) => ReactNode);
-  tooltip: boolean | ReactNode | TooltipProps;
+  tooltip: ReactNode | TooltipProps;
  /** `5.16.0` 新增 */
  defaultExpanded: boolean;
  /** `5.16.0` 新增 */
--- a/package.json
+++ b/package.json
@ -128,7 +128,7 @@
    "rc-motion": "^2.9.2",
    "rc-notification": "~5.6.0",
    "rc-pagination": "~4.2.0",
-    "rc-picker": "~4.6.7",
+    "rc-picker": "~4.6.8",
    "rc-progress": "~4.0.0",
    "rc-rate": "~2.13.0",
    "rc-resize-observer": "^1.4.0",
@ -143,7 +143,7 @@
    "rc-tooltip": "~6.2.0",
    "rc-tree": "~5.8.8",
    "rc-tree-select": "~5.22.1",
-    "rc-upload": "~4.5.2",
+    "rc-upload": "~4.6.0",
    "rc-util": "^5.43.0",
    "scroll-into-view-if-needed": "^3.1.0",
    "throttle-debounce": "^5.0.0"
@ -161,6 +161,7 @@
    "@dnd-kit/sortable": "^8.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@emotion/react": "^11.11.4",
+    "@emotion/css": "^11.11.2",
    "@emotion/server": "^11.11.0",
    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
    "@inquirer/prompts": "^5.1.2",