Merge pull request #40659 from ant-design/master

chore: merge master into feature
2024-11-30 19:19:26 +08:00 · 2023-02-09 17:54:04 +08:00 · 2023-02-09 17:54:04 +08:00 · d39765ba50
commit d39765ba50
parent c412894eba 31cbbce825
30 changed files with 340 additions and 105 deletions
--- a/.dumi/theme/builtins/Previewer/index.tsx
+++ b/.dumi/theme/builtins/Previewer/index.tsx
@ -89,9 +89,14 @@ const Demo: React.FC<DemoProps> = (props) => {
  const { hash, pathname, search } = location;
  const docsOnlineUrl = `https://ant.design${pathname}${search}#${meta.id}`;

-  const regexp = /preview-(\d+)-ant-design/; // matching PR preview addresses
-  const showOnlineUrl =
-    process.env.NODE_ENV === 'development' || regexp.test(window.location.hostname);
+  const [showOnlineUrl, setShowOnlineUrl] = useState<boolean>(false);
+
+  useEffect(() => {
+    const regexp = /preview-(\d+)-ant-design/; // matching PR preview addresses
+    setShowOnlineUrl(
+      process.env.NODE_ENV === 'development' || regexp.test(window.location.hostname),
+    );
+  }, []);

  const handleCodeExpand = (demo: string) => {
    setCodeExpand((prev) => !prev);
--- a/.dumi/theme/common/GlobalStyles.tsx
+++ b/.dumi/theme/common/GlobalStyles.tsx
@ -13,6 +13,7 @@ import {
  PreviewImage,
  Reset,
  Responsive,
+  SearchBar,
 } from './styles';

 const GlobalStyles = () => (
@ -30,6 +31,7 @@ const GlobalStyles = () => (
    <PreviewImage />
    <ColorStyle />
    <HeadingAnchor />
+    <SearchBar />
  </>
 );

--- a/.dumi/theme/common/styles/SearchBar.tsx
+++ b/.dumi/theme/common/styles/SearchBar.tsx
@ -0,0 +1,57 @@
+import React from 'react';
+import { css, Global } from '@emotion/react';
+import useSiteToken from '../../../hooks/useSiteToken';
+
+const THEME_PREFIX = 'dumi-default-';
+
+export default () => {
+  const { token } = useSiteToken();
+
+  return (
+    <Global
+      styles={css`
+        html {
+          .${THEME_PREFIX}search-bar {
+            &-input {
+              color: ${token.colorText};
+              background: ${token.colorBgContainer};
+              &:focus {
+                background: ${token.colorBgContainer};
+              }
+              &::placeholder {
+                color: ${token.colorTextPlaceholder} !important;
+              }
+            }
+          }
+          .${THEME_PREFIX}search-popover {
+            background-color: ${token.colorBgElevated} !important;
+            &::before {
+              border-bottom-color: ${token.colorBgElevated} !important;
+            }
+          }
+          .${THEME_PREFIX}search-result {
+            dl {
+              dt {
+                background-color: ${token.controlItemBgActive} !important;
+              }
+              dd {
+                a {
+                  &:hover {
+                    background-color: ${token.controlItemBgHover};
+                    h4,
+                    p {
+                      color: ${token.colorText} !important;
+                    }
+                    svg {
+                      fill: ${token.colorText} !important;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      `}
+    />
+  );
+};
--- a/.dumi/theme/common/styles/index.ts
+++ b/.dumi/theme/common/styles/index.ts
@ -10,3 +10,4 @@ export { default as BrowserMockup } from './BrowserMockup';
 export { default as Responsive } from './Responsive';
 export { default as NProgress } from './NProgress';
 export { default as PreviewImage } from './PreviewImage';
+export { default as SearchBar } from './SearchBar';
--- a/.dumi/theme/slots/Content/index.tsx
+++ b/.dumi/theme/slots/Content/index.tsx
@ -187,7 +187,7 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
          </section>
        </Affix>
        <article css={styles.articleWrapper} className={classNames({ rtl: isRTL })}>
-          {meta.frontmatter?.title && meta.frontmatter.subtitle ? (
+          {meta.frontmatter?.title ? (
            <Typography.Title style={{ fontSize: 30 }}>
              {meta.frontmatter?.title}
              {meta.frontmatter.subtitle && (
--- a/.dumi/theme/slots/Header/index.tsx
+++ b/.dumi/theme/slots/Header/index.tsx
@ -33,7 +33,7 @@ const useStyle = () => {
      z-index: 10;
      max-width: 100%;
      background: ${token.colorBgContainer};
-      box-shadow: ${token.boxShadow};
+      box-shadow: ${token.boxShadowTertiary};

      @media only screen and (max-width: ${token.mobileMaxWidth}px) {
        text-align: center;
--- a/.github/workflows/codeball.yml
+++ b/.github/workflows/codeball.yml
@ -1,21 +0,0 @@
-name: Codeball
-on:
-  pull_request: {}
-  pull_request_review_comment:
-    types: [created, edited]
-
-jobs:
-  codeball_job:
-    runs-on: ubuntu-latest
-    name: Codeball
-    steps:
-      # Run Codeball on all new Pull Requests and Review Comments! 🚀
-      # For customizations and more documentation, see https://github.com/sturdy-dev/codeball-action
-      - name: Codeball
-        uses: sturdy-dev/codeball-action@v2
-        with:
-          # Settings for "Codeball Approver"
-          approvePullRequests: "false"
-          labelPullRequestsWhenApproved: "true"
-          labelPullRequestsWhenReviewNeeded: "true"
-          failJobsWhenReviewNeeded: "false"
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,68 @@ timeline: true

 ---

+## 5.2.0
+
+`2023-2-8`
+
+- 🔥 Add `picture-circle` to Upload's `listType` prop. [#40134](https://github.com/ant-design/ant-design/pull/40134) [@ds1371dani](https://github.com/ds1371dani)
+- 🔥 Anchor component add `direction`, which supports vertical. [#39372](https://github.com/ant-design/ant-design/pull/39372) [@foryuki](https://github.com/foryuki)
+- 🆕 Tooltip support `arrow` to change arrow's visible state and whether the arrow is pointed at the center of target. [#40234](https://github.com/ant-design/ant-design/pull/40234) [@kiner-tang](https://github.com/kiner-tang)
+- 🆕 Added list pagination `align` option. [#39858](https://github.com/ant-design/ant-design/pull/39858) [@Yuiai01](https://github.com/Yuiai01)
+- 🆕 Timeline added `items` to support option configuration. [#40424](https://github.com/ant-design/ant-design/pull/40424)
+- Collapse
+  - 🆕 Collapse supports setting `size`. [#40286](https://github.com/ant-design/ant-design/pull/40286) [@Yuiai01](https://github.com/Yuiai01)
+  - 🆕 Add ref for Collapse and Panel. [#40443](https://github.com/ant-design/ant-design/pull/40443) [@any1024](https://github.com/any1024)
+- Slider
+  - 🆕 Slider add `railStyle` for custom style. [#40579](https://github.com/ant-design/ant-design/pull/40579) [@david-cord](https://github.com/david-cord)
+  - 🆕 Slider add support for disable `keyboard` events. [#40526](https://github.com/ant-design/ant-design/pull/40526)
+  - 🐞 Fix Slider missing Tooltip appear motion. [#39857](https://github.com/ant-design/ant-design/pull/39857)
+- Dropdown
+  - 🆕 Dropdown support `autoAdjustOverflow` option. [#39735](https://github.com/ant-design/ant-design/pull/39735)
+  - 💄 Fix Dropdown component `danger` and `disabled` style priority issue. [#39904](https://github.com/ant-design/ant-design/pull/39904) [@Wxh16144](https://github.com/Wxh16144)
+- Tour
+  - 🆕 Tour added `indicatorsRender` to support custom indicators. [#40613](https://github.com/ant-design/ant-design/pull/40613)
+  - 🆕 Tour support `scrollIntoViewOptions` to change scrollIntoView options. [#39980](https://github.com/ant-design/ant-design/pull/39980) [@kiner-tang](https://github.com/kiner-tang)
+  - 🆕 Tour masks support passing custom styles and fill colors. [#39919](https://github.com/ant-design/ant-design/pull/39919) [@kiner-tang](https://github.com/kiner-tang)
+  - 🐞 Fixed `findDomNode` method warning thrown by the tour component when called in strict mode. [#40160](https://github.com/ant-design/ant-design/pull/40160) [@kiner-tang](https://github.com/kiner-tang)
+  - 💄 Deleted margin of the last indicator. [#40624](https://github.com/ant-design/ant-design/pull/40624)
+- 🆕 Adds Design token `fontFamilyCode` and apply to Typography `code` `kbd` `pre` elements. [#39823](https://github.com/ant-design/ant-design/pull/39823)
+- 🆕 ConfigProvider add Form `scrollToFirstError`。[#39509](https://github.com/ant-design/ant-design/pull/39509) [@linxianxi](https://github.com/linxianxi)
+- 🐞 Fill rest `rootClassName` for all components. [#40217](https://github.com/ant-design/ant-design/pull/40217)
+- 🐞 Fix Empty descriptions text color in default theme and dark theme. [#40584](https://github.com/ant-design/ant-design/pull/40584) [@MuxinFeng](https://github.com/MuxinFeng)
+- Table
+  - 🐞 Fix `aria-label` and `role="presentation"` cannot be used together in Table row. [#40413](https://github.com/ant-design/ant-design/pull/40413) [@Ke1sy](https://github.com/Ke1sy)
+  - 🐞 Fix uncontrolled `filtered` update not working. [#39883](https://github.com/ant-design/ant-design/pull/39883)
+  - 🐞 Fix the problem that the header filter is invalid in the case of group headers. [#40463](https://github.com/ant-design/ant-design/pull/40463) [@roman40a](https://github.com/roman40a)
+  - 🐞 Fix selection column cover by other cell when fixed. [#39940](https://github.com/ant-design/ant-design/pull/39940) [@kiner-tang](https://github.com/kiner-tang)
+  - 🐞 Fix Sorted/Filtered table fixed column transparent background unreadable. [#39012](https://github.com/ant-design/ant-design/pull/39012) [@kiner-tang](https://github.com/kiner-tang)
+  - 💄 Optimize Table hover style to fix problems with border. [#40469](https://github.com/ant-design/ant-design/pull/40469)
+- DatePicker
+  - 🐞 Fix DatePicker that have status style when disabled. [#40608](https://github.com/ant-design/ant-design/pull/40608)
+  - 💄 Optimize the DatePicker input box style. [#40549](https://github.com/ant-design/ant-design/pull/40549) [@Wxh16144](https://github.com/Wxh16144)
+  - 💄 Optimize DatePicker Dropdown arrow style. [#40521](https://github.com/ant-design/ant-design/pull/40521)
+- 🐞 Fix Space `ant-space-item` selector bug. [#40554](https://github.com/ant-design/ant-design/pull/40554) [@cncolder](https://github.com/cncolder)
+- 🐞 Fix not close Spin immediately when using `delay`. [#40475](https://github.com/ant-design/ant-design/pull/40475) [@3Alan](https://github.com/3Alan)
+- 🐞 Fix Modal `useModal` default confirm button text logic. [#39884](https://github.com/ant-design/ant-design/pull/39884) [@BoyYangzai](https://github.com/BoyYangzai)
+- 🛠 Refactored the water ripple visual effect to trigger multiple water ripples at the same time. [#39705](https://github.com/ant-design/ant-design/pull/39705) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🛠 Refactor Input.TextArea and Mentions. [#40045](https://github.com/ant-design/ant-design/pull/40045)
+- 🛠 Refactor Affix Calendar to use React.createRef instead of function. [#40538](https://github.com/ant-design/ant-design/pull/40538) [@li-jia-nan](https://github.com/li-jia-nan)
+- 💄 Fix Tabs more button unexpected height. [#40488](https://github.com/ant-design/ant-design/pull/40488)
+- 💄 Resolve Image preview style conflict with TailwindCSS. [#39914](https://github.com/ant-design/ant-design/pull/39914)
+- 💄 Fix Progress that `transition` of success bar is missing. [#40487](https://github.com/ant-design/ant-design/pull/40487)
+- 💄 Fix the misalignment of Input.Group when zooming the screen under windows. [#39842](https://github.com/ant-design/ant-design/pull/39842) [@heiyu4585](https://github.com/heiyu4585)
+- 💄 Fix Select placeholder style issue. [#40477](https://github.com/ant-design/ant-design/pull/40477) [@Wxh16144](https://github.com/Wxh16144)
+- 💄 Adjust Descriptions label style for more readable. [#40085](https://github.com/ant-design/ant-design/pull/40085)
+- 💄 Optimize QRCode expiration display style. [#39849](https://github.com/ant-design/ant-design/pull/39849)
+- 💄 Optimize `boxShadow` tokens. [#40516](https://github.com/ant-design/ant-design/pull/40516)
+- TypeScript
+  - 🤖 Optimize Badge Tag Tooltip `color` type definition. [#39871](https://github.com/ant-design/ant-design/pull/39871)
+  - 🤖 Add `Breakpoint` `ThmeConfig` `GlobalToken` type export. [#40508](https://github.com/ant-design/ant-design/pull/40508) [@Kamahl19](https://github.com/Kamahl19)
+  - 🤖 Update Upload `fileList` type. [#40585](https://github.com/ant-design/ant-design/pull/40585)
+  - 🤖 Remove Tour ForwardRefRenderFunction. [#39924](https://github.com/ant-design/ant-design/pull/39924)
+- 🌐 Localization
+  - 🇮🇳 Add `ta_IN` local. [#39936](https://github.com/ant-design/ant-design/pull/39936) [@KIRUBASHANKAR26](https://github.com/KIRUBASHANKAR26)
+
 ## 5.1.7

 `2023-1-31`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,68 @@ timeline: true

 ---

+## 5.2.0
+
+`2023-2-8`
+
+- 🔥 Upload 的 `listType` 属性添加 `picture-circle` 支持。[#40134](https://github.com/ant-design/ant-design/pull/40134) [@ds1371dani](https://github.com/ds1371dani)
+- 🔥 Anchor 组件新增 `direction` 属性，支持 vertical。[#39372](https://github.com/ant-design/ant-design/pull/39372) [@foryuki](https://github.com/foryuki)
+- 🆕 Tooltip 新增 `arrow` 属性用来改变箭头的显示状态和箭头是否指向目标元素的中心。[#40234](https://github.com/ant-design/ant-design/pull/40234) [@kiner-tang](https://github.com/kiner-tang)
+- 🆕 List 分页新增 `align` 配置。[#39858](https://github.com/ant-design/ant-design/pull/39858) [@Yuiai01](https://github.com/Yuiai01)
+- 🆕 Timeline 新增 `items` 支持选项配置。[#40424](https://github.com/ant-design/ant-design/pull/40424)
+- Collapse
+  - 🆕 Collapse 新增支持设置 `size`。[#40286](https://github.com/ant-design/ant-design/pull/40286) [@Yuiai01](https://github.com/Yuiai01)
+  - 🆕 为 Collapse 和 Panel 添加 ref。[#40443](https://github.com/ant-design/ant-design/pull/40443) [@any1024](https://github.com/any1024)
+- Slider
+  - 🆕 Slider 新增 `railStyle` 属性用于自定义样式。[#40579](https://github.com/ant-design/ant-design/pull/40579) [@david-cord](https://github.com/david-cord)
+  - 🆕 Slider 新增 `keyboard` 属性以支持禁用键盘事件。[#40526](https://github.com/ant-design/ant-design/pull/40526)
+  - 🐞 修复 Slider 展示 Tooltip 时动画丢失的问题。[#39857](https://github.com/ant-design/ant-design/pull/39857)
+- Dropdown
+  - 🆕 Dropdown 组件支持 `autoAdjustOverflow` 属性。[#39735](https://github.com/ant-design/ant-design/pull/39735)
+  - 💄 修复 Dropdown `danger` 和 `disable` 属性同时使用样式问题。[#39904](https://github.com/ant-design/ant-design/pull/39904) [@Wxh16144](https://github.com/Wxh16144)
+- Tour
+  - 🆕 Tour 新增 `indicatorsRender` 支持自定义指示器。[#40613](https://github.com/ant-design/ant-design/pull/40613)
+  - 🆕 Tour 支持通过 `scrollIntoViewOptions` 改变`scrollIntoView` 的选项。[#39980](https://github.com/ant-design/ant-design/pull/39980) [@kiner-tang](https://github.com/kiner-tang)
+  - 🆕 Tour 遮罩支持传递自定义样式和填充颜色。[#39919](https://github.com/ant-design/ant-design/pull/39919) [@kiner-tang](https://github.com/kiner-tang)
+  - 🐞 修复 Tour 在严格模式下调用 `findDomNode` 抛出警告问题。[#40160](https://github.com/ant-design/ant-design/pull/40160) [@kiner-tang](https://github.com/kiner-tang)
+  - 💄 删除了最后一个指示器的 margin。[#40624](https://github.com/ant-design/ant-design/pull/40624)
+- 🆕 新增 Design token `fontFamilyCode` 并应用到 Typography 的 `code` `kbd` `pre` 等元素上。[#39823](https://github.com/ant-design/ant-design/pull/39823)
+- 🆕 ConfigProvider 新增 Form `scrollToFirstError`。[#39509](https://github.com/ant-design/ant-design/pull/39509) [@linxianxi](https://github.com/linxianxi)
+- 🐞 为全部组件补足 `rootClassName` 属性。[#40217](https://github.com/ant-design/ant-design/pull/40217)
+- 🐞 修复 Empty 在默认主题和暗黑主题下的描述文字颜色。[#40584](https://github.com/ant-design/ant-design/pull/40584) [@MuxinFeng](https://github.com/MuxinFeng)
+- Table
+  - 🐞 修复 Table 行 `aria-label` 和 `role="presentation"` 无法一起使用的问题。[#40413](https://github.com/ant-design/ant-design/pull/40413) [@Ke1sy](https://github.com/Ke1sy)
+  - 🐞 修改非受控 `filtered` 修改不生效的问题。[#39883](https://github.com/ant-design/ant-design/pull/39883)
+  - 🐞 修表头过滤器在分组标题情况下失效的问题。[#40463](https://github.com/ant-design/ant-design/pull/40463) [@roman40a](https://github.com/roman40a)
+  - 🐞 修复选择列固定时滚动会被其他单元格遮盖的问题。[#39940](https://github.com/ant-design/ant-design/pull/39940) [@kiner-tang](https://github.com/kiner-tang)
+  - 🐞 修复排序/筛选的表格的固定列背景色透明导致显示异常问题。[#39012](https://github.com/ant-design/ant-design/pull/39012) [@kiner-tang](https://github.com/kiner-tang)
+  - 💄 优化 Table 组件 hover 样式，修复边框异常问题。[#40469](https://github.com/ant-design/ant-design/pull/40469)
+- DatePicker
+  - 🐞 修复 DatePicker 组件禁用时状态样式生效的问题。[#40608](https://github.com/ant-design/ant-design/pull/40608)
+  - 💄 优化 DatePicker 输入框样式。[#40549](https://github.com/ant-design/ant-design/pull/40549) [@Wxh16144](https://github.com/Wxh16144)
+  - 💄 优化 DatePicker Dropdown 箭头样式。[#40521](https://github.com/ant-design/ant-design/pull/40521)
+- 🐞 修复 Space `ant-space-item` 选择器错误。[#40554](https://github.com/ant-design/ant-design/pull/40554) [@cncolder](https://github.com/cncolder)
+- 🐞 修复当设置 `delay` 时，Spin 没有立即关闭的问题。[#40475](https://github.com/ant-design/ant-design/pull/40475) [@3Alan](https://github.com/3Alan)
+- 🐞 修复 Modal `useModal` 默认确认按钮文本逻辑。[#39884](https://github.com/ant-design/ant-design/pull/39884) [@BoyYangzai](https://github.com/BoyYangzai)
+- 🛠 重构水波纹视效，以支持多个水波纹同时触发了。[#39705](https://github.com/ant-design/ant-design/pull/39705) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🛠 重构 Input.TextArea 组件和 Mentions 组件。[#40045](https://github.com/ant-design/ant-design/pull/40045)
+- 🛠 重构 Affix Calendar 使用 React.createRef 代替函数。[#40538](https://github.com/ant-design/ant-design/pull/40538) [@li-jia-nan](https://github.com/li-jia-nan)
+- 💄 修复 Tabs 更多按钮高度样式错误。[#40488](https://github.com/ant-design/ant-design/pull/40488)
+- 💄 修复 Image 预览样式会被 TailwindCSS 影响的问题。[#39914](https://github.com/ant-design/ant-design/pull/39914)
+- 💄 修复 Progress 成功进度条 `transition` 样式丢失问题。[#40487](https://github.com/ant-design/ant-design/pull/40487)
+- 💄 修复 Input.Group 在 windows 下缩放屏幕时的错位问题。[#39842](https://github.com/ant-design/ant-design/pull/39842) [@heiyu4585](https://github.com/heiyu4585)
+- 💄 修复 Select placeholder 样式问题。[#40477](https://github.com/ant-design/ant-design/pull/40477) [@Wxh16144](https://github.com/Wxh16144)
+- 💄 调整 Descriptions 标签样式使其更容易区分。[#40085](https://github.com/ant-design/ant-design/pull/40085)
+- 💄 优化 QRCode 过期显示样式。[#39849](https://github.com/ant-design/ant-design/pull/39849)
+- 💄 优化 `boxShadow` token 分级。[#40516](https://github.com/ant-design/ant-design/pull/40516)
+- TypeScript
+  - 🤖 优化 Badge Tag Tooltip `color` 类型定义。[#39871](https://github.com/ant-design/ant-design/pull/39871)
+  - 🤖 新增 `Breakpoint` `ThmeConfig` `GlobalToken` 类型导出。[#40508](https://github.com/ant-design/ant-design/pull/40508) [@Kamahl19](https://github.com/Kamahl19)
+  - 🤖 更新 Upload `fileList` 类型。[#40585](https://github.com/ant-design/ant-design/pull/40585)
+  - 🤖 移除 Tour ForwardRefRenderFunction。[#39924](https://github.com/ant-design/ant-design/pull/39924)
+- 🌐 国际化
+  - 🇮🇳 补全 `ta_IN` 文案。[#39936](https://github.com/ant-design/ant-design/pull/39936) [@KIRUBASHANKAR26](https://github.com/KIRUBASHANKAR26)
+
 ## 5.1.7

 `2023-1-31`
--- a/README.md
+++ b/README.md
@ -14,7 +14,7 @@ An enterprise-class UI design language and React UI library.

 [![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]

-[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![Issues need help][help-wanted-image]][help-wanted-url]
+[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]

 [npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/antd
@ -38,6 +38,8 @@ An enterprise-class UI design language and React UI library.
 [issues-helper-url]: https://github.com/actions-cool/issues-helper
 [renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
 [renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
+[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
+[dumi-url]: https://github.com/umijs/dumi

 </div>

--- a/components/date-picker/demo/format.md
+++ b/components/date-picker/demo/format.md
@ -1,7 +1,7 @@
 ## zh-CN

-使用 `format` 属性，可以自定义日期显示格式。
+使用 `format` 属性，可以自定义日期显示格式。当 `format` 为数组时，选择器输入框可以输入数组中任意一个有效格式。

 ## en-US

-We can set the date format by `format`.
+We can set the date format by `format`. When `format` is an array, the input box can be entered in any of the valid formats of the array.
--- a/components/date-picker/demo/format.tsx
+++ b/components/date-picker/demo/format.tsx
@ -12,7 +12,8 @@ const dateFormat = 'YYYY/MM/DD';
 const weekFormat = 'MM/DD';
 const monthFormat = 'YYYY/MM';

-const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
+/** Manually entering any of the following formats will perform date parsing */
+const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY', 'DD-MM-YYYY', 'DD-MM-YY'];

 const customFormat: DatePickerProps['format'] = (value) =>
  `custom format: ${value.format(dateFormat)}`;
--- a/components/date-picker/style/index.ts
+++ b/components/date-picker/style/index.ts
@ -869,14 +869,14 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
  } = token;

  return {
-    [componentCls]: {
-      [`&-status-error${componentCls}`]: {
+    [`${componentCls}:not(${componentCls}-disabled)`]: {
+      [`&${componentCls}-status-error`]: {
        '&, &:not([disabled]):hover': {
          backgroundColor: colorBgContainer,
          borderColor: colorError,
        },

-        '&-focused, &:focus': {
+        [`&${componentCls}-focused, &:focus`]: {
          ...genActiveStyle(
            mergeToken<PickerToken>(token, {
              inputBorderActiveColor: colorError,
@ -891,13 +891,13 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
        },
      },

-      [`&-status-warning${componentCls}`]: {
+      [`&${componentCls}-status-warning`]: {
        '&, &:not([disabled]):hover': {
          backgroundColor: colorBgContainer,
          borderColor: colorWarning,
        },

-        '&-focused, &:focus': {
+        [`&${componentCls}-focused, &:focus`]: {
          ...genActiveStyle(
            mergeToken<PickerToken>(token, {
              inputBorderActiveColor: colorWarning,
--- a/components/empty/style/index.ts
+++ b/components/empty/style/index.ts
@ -39,6 +39,10 @@ const genSharedEmptyStyle: GenerateStyle<EmptyToken> = (token): CSSObject => {
        },
      },

+      [`${componentCls}-description`]: {
+        color: token.colorText,
+      },
+
      // 原来 &-footer 没有父子结构，现在为了外层承担我们的hashId，改成父子结果
      [`${componentCls}-footer`]: {
        marginTop: margin,
@ -48,6 +52,10 @@ const genSharedEmptyStyle: GenerateStyle<EmptyToken> = (token): CSSObject => {
        marginBlock: marginXL,
        color: token.colorTextDisabled,

+        [`${componentCls}-description`]: {
+          color: token.colorTextDisabled,
+        },
+
        [`${componentCls}-image`]: {
          height: token.emptyImgHeightMD,
        },
--- a/components/locale/ru_RU.ts
+++ b/components/locale/ru_RU.ts
@ -23,6 +23,7 @@ const localeValues: Locale = {
    filterReset: 'Сбросить',
    filterEmptyText: 'Без фильтров',
    filterCheckall: 'Выбрать все элементы',
+    filterSearchPlaceholder: 'Поиск в фильтрах',
    emptyText: 'Нет данных',
    selectAll: 'Выбрать всё',
    selectInvert: 'Инвертировать выбор',
@ -35,6 +36,11 @@ const localeValues: Locale = {
    triggerAsc: 'Нажмите для сортировки по возрастанию',
    cancelSort: 'Нажмите, чтобы отменить сортировку',
  },
+  Tour: {
+    Next: 'Далее',
+    Previous: 'Назад',
+    Finish: 'Завершить',
+  },
  Modal: {
    okText: 'OK',
    cancelText: 'Отмена',
@ -79,6 +85,7 @@ const localeValues: Locale = {
    back: 'Назад',
  },
  Form: {
+    optional: '(необязательно)',
    defaultValidateMessages: {
      default: 'Ошибка проверки поля ${label}',
      required: 'Пожалуйста, введите ${label}',
@ -114,6 +121,7 @@ const localeValues: Locale = {
        len: '${label} должна быть равна ${len}',
        min: '${label} должна быть больше или равна ${min}',
        max: '${label} должна быть меньше или равна ${max}',
+        range: '${label} должна быть между ${min}-${max}',
      },
      array: {
        len: 'Количество элементов ${label} должно быть равно ${len}',
@ -129,6 +137,10 @@ const localeValues: Locale = {
  Image: {
    preview: 'Предпросмотр',
  },
+  QRCode: {
+    expired: 'QR-код устарел',
+    refresh: 'Обновить',
+  },
 };

 export default localeValues;
--- a/components/locale/uk_UA.ts
+++ b/components/locale/uk_UA.ts
@ -35,6 +35,11 @@ const localeValues: Locale = {
    triggerAsc: 'Сортувати за зростанням',
    cancelSort: 'Відмінити сортування',
  },
+  Tour: {
+    Next: 'Далі',
+    Previous: 'Назад',
+    Finish: 'Завершити',
+  },
  Modal: {
    okText: 'Гаразд',
    cancelText: 'Скасувати',
@ -131,6 +136,10 @@ const localeValues: Locale = {
  Image: {
    preview: 'Попередній перегляд',
  },
+  QRCode: {
+    expired: 'QR-код закінчився',
+    refresh: 'Оновити',
+  },
 };

 export default localeValues;
--- a/components/spin/tests/delay.test.tsx
+++ b/components/spin/tests/delay.test.tsx
@ -42,4 +42,15 @@ describe('delay spinning', () => {
    unmount();
    expect(cancel).toHaveBeenCalled();
  });
+
+  it('should close immediately', async () => {
+    jest.useFakeTimers();
+    const { container, rerender } = render(<Spin spinning delay={500} />);
+
+    await waitFakeTimer();
+    expect(container.querySelector('.ant-spin-spinning')).toBeTruthy();
+
+    rerender(<Spin spinning={false} delay={500} />);
+    expect(container.querySelector('.ant-spin-spinning')).toBeFalsy();
+  });
 });
--- a/components/spin/index.tsx
+++ b/components/spin/index.tsx
@ -93,13 +93,17 @@ const Spin: React.FC<SpinClassProps> = (props) => {
  );

  React.useEffect(() => {
-    const updateSpinning = debounce(delay, () => {
-      setSpinning(customSpinning);
-    });
-    updateSpinning();
-    return () => {
-      updateSpinning?.cancel?.();
-    };
+    if (customSpinning) {
+      const showSpinning = debounce(delay, () => {
+        setSpinning(true);
+      });
+      showSpinning();
+      return () => {
+        showSpinning?.cancel?.();
+      };
+    }
+
+    setSpinning(false);
  }, [delay, customSpinning]);

  const isNestedPattern = React.useMemo<boolean>(() => typeof children !== 'undefined', [children]);
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@ -283,6 +283,7 @@ Properties for row selection.
 ```tsx
 import { Table } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
+import React from 'react';

 interface User {
  key: number;
@ -304,7 +305,7 @@ const data: User[] = [
  },
 ];

-export default () => (
+const Demo: React.FC = () => (
  <>
    <Table<User> columns={columns} dataSource={data} />
    {/* JSX style usage */}
@ -313,6 +314,8 @@ export default () => (
    </Table>
  </>
 );
+
+export default Demo;
 ```

 Here is the [CodeSandbox for TypeScript](https://codesandbox.io/s/serene-platform-0jo5t).
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@ -286,6 +286,7 @@ const columns = [
 ```tsx
 import { Table } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
+import React from 'react';

 interface User {
  key: number;
@ -307,7 +308,7 @@ const data: User[] = [
  },
 ];

-export default () => (
+const Demo: React.FC = () => (
  <>
    <Table<User> columns={columns} dataSource={data} />
    {/* 使用 JSX 风格的 API */}
@ -316,6 +317,8 @@ export default () => (
    </Table>
  </>
 );
+
+export default Demo;
 ```

 TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。
--- a/components/theme/interface/seeds.ts
+++ b/components/theme/interface/seeds.ts
@ -77,7 +77,7 @@ export interface SeedToken extends PresetColorType {
   * @nameEN Font family for code text
   * @desc 代码字体，用于 Typography 内的 code、pre 和 kbd 类型的元素
   */
-  codeFontFamily: string;
+  fontFamilyCode: string;

  /**
   * @nameZH 默认字号
--- a/components/theme/themes/seed.ts
+++ b/components/theme/themes/seed.ts
@ -34,7 +34,7 @@ const seedToken: SeedToken = {
  fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
 'Noto Color Emoji'`,
-  codeFontFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`,
+  fontFamilyCode: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`,
  fontSize: 14,

  // Line
--- a/components/timeline/index.en-US.md
+++ b/components/timeline/index.en-US.md
@ -14,6 +14,21 @@ Vertical display timeline.
 - When a series of information needs to be ordered by time (ascending or descending).
 - When you need a timeline to make a visual connection.

+<Alert message="After version 5.2.0, we provide a simpler usage &lt;Timeline items={[...]} /&gt; with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0."></Alert>
+
+```jsx
+// works when >=5.2.0, recommended ✅
+const items = [{ children: 'sample', label: 'sample' }];
+return <Timeline items={items} />;
+
+// works when <5.2.0, deprecated when >=5.2.0 🙅🏻‍♀️
+return (
+  <Timeline onChange={onChange}>
+    <Timeline.Item>Sample</Timeline.Item>
+  </Timeline>
+);
+```
+
 ## Examples

 <!-- prettier-ignore -->
@ -26,36 +41,21 @@ Vertical display timeline.
 <code src="./demo/label.tsx">Label</code>
 <code src="./demo/wireframe.tsx" debug>Wireframe</code>

-<Alert message="After version 5.2.0, we provide a simpler usage &lt;Timeline items={[...]} /&gt; with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0."></Alert>
-
-```jsx
-// works when >=5.2.0, recommended ✅
-const items = [{ children: 'sample', label: 'sample' }];
-return <Timeline items={items} />;
-
-// works when <5.2.0, deprecated when >=5.2.0 🙅🏻‍♀️
-<Timeline onChange={onChange}>
-  <Timeline.Item>Sample</Timeline.Item>
-</Timeline>;
-```
-
 ## API

 ### Timeline

-Timeline
-
 | Property | Description | Type | Default |
-| --- | --- | --- | --- | --- |
+| --- | --- | --- | --- |
 | mode | By sending `alternate` the timeline will distribute the nodes to the left and right | `left` \| `alternate` \| `right` | - |
 | pending | Set the last ghost node's existence or its content | boolean \| ReactNode | false |
-| pendingDot | Set the dot of the last ghost node when pending is true | ReactNode | &lt;LoadingOutlined /> |
+| pendingDot | Set the dot of the last ghost node when pending is true | ReactNode | &lt;LoadingOutlined /&gt; |
 | reverse | Whether reverse nodes or not | boolean | false |
-| items | 选项配置 | [Items](#Items) | [] | 5.2.0 |
+| items | Each node of timeline | [Items](#Items)[] | 5.2.0 |

 ### Items

-Node of timeline
+Node of timeline.

 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
--- a/components/timeline/index.zh-CN.md
+++ b/components/timeline/index.zh-CN.md
@ -15,6 +15,21 @@ demo:
 - 当有一系列信息需按时间排列时，可正序和倒序。
 - 需要有一条时间轴进行视觉上的串联时。

+<Alert message="5.2.0版本之后，我们提供了更简单的用法 &lt;Timeline items={[...]} /&gt; 以获得更好的性能，使您能在应用中编写更简单的代码。与此同时，我们弃用了旧的用法，并且将在下一个 major 版本中删除它。"></Alert>
+
+```jsx
+// >=5.2.0 可用，推荐的写法 ✅
+const items = [{ children: 'sample', label: 'sample' }];
+return <Timeline items={items} />;
+
+// <5.2.0 可用，>=5.2.0 时不推荐 🙅🏻‍♀️
+return (
+  <Timeline onChange={onChange}>
+    <Timeline.Item>Sample</Timeline.Item>
+  </Timeline>
+);
+```
+
 ## 代码演示

 <!-- prettier-ignore -->
@ -27,32 +42,17 @@ demo:
 <code src="./demo/label.tsx">标签</code>
 <code src="./demo/wireframe.tsx" debug>线框风格</code>

-<Alert message="5.2.0版本之后，我们提供了更简单的用法 &lt;Timeline items={[...]} /&gt; 以提供具有更好的性能和使您在应用程序中能编写更简单代码潜力。 与此同时，我们弃用了旧的用法，我们将在 antd 6.0 中删除它。"></Alert>
-
-```jsx
-// >=5.2.0 可用，推荐的写法 ✅
-const items = [{ children: 'sample', label: 'sample' }];
-return <Timeline items={items} />;
-
-// <5.2.0 可用，>=5.2.0 时不推荐 🙅🏻‍♀️
-<Timeline onChange={onChange}>
-  <Timeline.Item>Sample</Timeline.Item>
-</Timeline>;
-```
-
 ## API

 ### Timeline

-时间轴。
-
 | 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- | --- |
+| --- | --- | --- | --- |
 | mode | 通过设置 `mode` 可以改变时间轴和内容的相对位置 | `left` \| `alternate` \| `right` | - |
 | pending | 指定最后一个幽灵节点是否存在或内容 | boolean \| ReactNode | false |
-| pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | ReactNode | &lt;LoadingOutlined /> |
+| pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | ReactNode | &lt;LoadingOutlined /&gt; |
 | reverse | 节点排序 | boolean | false |
-| items | 选项配置 | [Items](#Items) | [] | 5.2.0 |
+| items | 选项配置 | [Items](#Items)[] | 5.2.0 |

 ### Items

--- a/components/tour/style/index.ts
+++ b/components/tour/style/index.ts
@ -139,7 +139,9 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
                display: 'inline-block',
                borderRadius: '50%',
                background: colorFill,
-                marginInlineEnd: indicatorHeight,
+                '&:not(:last-child)': {
+                  marginInlineEnd: indicatorHeight,
+                },
                '&-active': {
                  background: colorPrimary,
                },
--- a/components/typography/style/mixins.ts
+++ b/components/typography/style/mixins.ts
@ -89,7 +89,7 @@ export const getResetStyles: GenerateStyle<TypographyToken, CSSObject> = (token)
    paddingInline: '0.4em',
    paddingBlock: '0.2em 0.1em',
    fontSize: '85%',
-    fontFamily: token.codeFontFamily,
+    fontFamily: token.fontFamilyCode,
    background: 'rgba(150, 150, 150, 0.1)',
    border: '1px solid rgba(100, 100, 100, 0.2)',
    borderRadius: 3,
@ -100,7 +100,7 @@ export const getResetStyles: GenerateStyle<TypographyToken, CSSObject> = (token)
    paddingInline: '0.4em',
    paddingBlock: '0.15em 0.1em',
    fontSize: '90%',
-    fontFamily: token.codeFontFamily,
+    fontFamily: token.fontFamilyCode,
    background: 'rgba(150, 150, 150, 0.06)',
    border: '1px solid rgba(100, 100, 100, 0.2)',
    borderBottomWidth: 2,
@ -164,7 +164,7 @@ export const getResetStyles: GenerateStyle<TypographyToken, CSSObject> = (token)
    background: 'rgba(150, 150, 150, 0.1)',
    border: '1px solid rgba(100, 100, 100, 0.2)',
    borderRadius: 3,
-    fontFamily: token.codeFontFamily,
+    fontFamily: token.fontFamilyCode,

    // Compatible for marked
    code: {
--- a/components/upload/interface.tsx
+++ b/components/upload/interface.tsx
@ -48,13 +48,13 @@ export interface UploadChangeParam<T = UploadFile> {
  event?: { percent: number };
 }

-export interface ShowUploadListInterface {
+export interface ShowUploadListInterface<T = any> {
  showRemoveIcon?: boolean;
  showPreviewIcon?: boolean;
  showDownloadIcon?: boolean;
-  removeIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
-  downloadIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
-  previewIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+  removeIcon?: React.ReactNode | ((file: UploadFile<T>) => React.ReactNode);
+  downloadIcon?: React.ReactNode | ((file: UploadFile<T>) => React.ReactNode);
+  previewIcon?: React.ReactNode | ((file: UploadFile<T>) => React.ReactNode);
 }

 export interface UploadLocale {
@ -71,7 +71,7 @@ export type UploadListProgressProps = Omit<ProgressProps, 'percent' | 'type'>;

 export type ItemRender<T = any> = (
  originNode: React.ReactElement,
-  file: UploadFile,
+  file: UploadFile<T>,
  fileList: Array<UploadFile<T>>,
  actions: {
    download: () => void;
@ -125,7 +125,7 @@ export interface UploadProps<T = any> extends Pick<RcUploadProps, 'capture'> {
  /** @deprecated Please use `beforeUpload` directly */
  transformFile?: TransformFileHandler;
  iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
-  isImageUrl?: (file: UploadFile) => boolean;
+  isImageUrl?: (file: UploadFile<T>) => boolean;
  progress?: UploadListProgressProps;
  itemRender?: ItemRender<T>;
  /** Config max count of `fileList`. Will replace current one when `maxCount` is 1 */
@ -156,7 +156,7 @@ export interface UploadListProps<T = any> {
  locale: UploadLocale;
  previewFile?: PreviewFileHandler;
  iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
-  isImageUrl?: (file: UploadFile) => boolean;
+  isImageUrl?: (file: UploadFile<T>) => boolean;
  appendAction?: React.ReactNode;
  appendActionVisible?: boolean;
  itemRender?: ItemRender<T>;
--- a/components/upload/utils.tsx
+++ b/components/upload/utils.tsx
@ -15,9 +15,9 @@ export function file2Obj(file: RcFile): InternalUploadFile {
 }

 /** Upload fileList. Replace file if exist or just push into it. */
-export function updateFileList(file: UploadFile<any>, fileList: UploadFile<any>[]) {
+export function updateFileList(file: UploadFile, fileList: (UploadFile | Readonly<UploadFile>)[]) {
  const nextFileList = [...fileList];
-  const fileIndex = nextFileList.findIndex(({ uid }: UploadFile) => uid === file.uid);
+  const fileIndex = nextFileList.findIndex(({ uid }) => uid === file.uid);
  if (fileIndex === -1) {
    nextFileList.push(file);
  } else {
@ -26,12 +26,12 @@ export function updateFileList(file: UploadFile<any>, fileList: UploadFile<any>[
  return nextFileList;
 }

-export function getFileItem(file: RcFile, fileList: UploadFile[]) {
+export function getFileItem(file: RcFile, fileList: (UploadFile | Readonly<UploadFile>)[]) {
  const matchKey = file.uid !== undefined ? 'uid' : 'name';
  return fileList.filter((item) => item[matchKey] === file[matchKey])[0];
 }

-export function removeFileItem(file: UploadFile, fileList: UploadFile[]) {
+export function removeFileItem(file: UploadFile, fileList: (UploadFile | Readonly<UploadFile>)[]) {
  const matchKey = file.uid !== undefined ? 'uid' : 'name';
  const removed = fileList.filter((item) => item[matchKey] !== file[matchKey]);
  if (removed.length === fileList.length) {
@ -74,6 +74,7 @@ export const isImageUrl = (file: UploadFile): boolean => {
 };

 const MEASURE_SIZE = 200;
+
 export function previewImage(file: File | Blob): Promise<string> {
  return new Promise((resolve) => {
    if (!file.type || !isImageFileType(file.type)) {
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "5.1.7",
+  "version": "5.2.0",
  "description": "An enterprise-class UI design language and React components implementation",
  "title": "Ant Design",
  "keywords": [
@ -208,7 +208,7 @@
    "eslint-config-airbnb": "^19.0.0",
    "eslint-config-prettier": "^8.0.0",
    "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-compat": "~4.0.0",
+    "eslint-plugin-compat": "^4.1.1",
    "eslint-plugin-import": "^2.21.1",
    "eslint-plugin-jest": "^27.0.1",
    "eslint-plugin-jsx-a11y": "^6.2.1",
@ -265,7 +265,7 @@
    "react-infinite-scroll-component": "^6.1.0",
    "react-resizable": "^3.0.1",
    "react-router-dom": "^6.0.2",
-    "react-sticky-box": "^1.0.2",
+    "react-sticky-box": "^2.0.0",
    "react-window": "^1.8.5",
    "remark": "^14.0.1",
    "remark-cli": "^11.0.0",
--- a/scripts/check-site.js
+++ b/scripts/check-site.js
@ -9,8 +9,7 @@ const { createServer } = require('http-server');

 const components = uniq(
  glob
-    .sync('components/*/*.md', {
-      ignore: '**/{__tests__,_util,version,index.tsx}',
+    .sync('components/!(overview)/*.md', {
      cwd: join(process.cwd()),
      dot: false,
    })
@ -35,7 +34,7 @@ describe('site test', () => {

  const handleComponentName = (name) => {
    const componentName = name.split('/')[1];
-    return componentName.toLowerCase().replace('-', '');
+    return componentName.toLowerCase().replace('-cn', '').replace('-', '');
  };

  const expectComponent = async (component) => {
@ -73,10 +72,22 @@ describe('site test', () => {
    expect(status).toBe(200);
  });

+  it('Overview en', async () => {
+    const { status, $ } = await render('/components/overview');
+    expect(status).toBe(200);
+    expect($('h1').text()).toMatch(`Overview`);
+  });
+
+  it('Overview zh', async () => {
+    const { status, $ } = await render('/components/overview-cn');
+    expect(status).toBe(200);
+    expect($('h1').text()).toMatch(`组件总览`);
+  });
+
  for (const component of components) {
    if (component.split('/').length < 3) {
      it(`Component ${component} zh Page`, async () => {
-        await expectComponent(component);
+        await expectComponent(`${component}-cn`);
      });

      it(`Component ${component} en Page`, async () => {