chore: auto merge branches (#41372)

chore: merge master into feature

.dumi/hooks/useLayoutState.ts

@@ -0,0 +1,17 @@
+import { startTransition, useState } from 'react';
+
+const useLayoutState = <S>(
+  ...args: Parameters<typeof useState<S>>
+): ReturnType<typeof useState<S>> => {
+  const [state, setState] = useState<S>(...args);
+
+  const setLayoutState: typeof setState = (...setStateArgs) => {
+    startTransition(() => {
+      setState(...setStateArgs);
+    });
+  };
+
+  return [state, setLayoutState];
+};
+
+export default useLayoutState;

.dumi/pages/index/components/Theme/ColorPicker.tsx

@@ -115,7 +115,12 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
                 }
               }}
             >
-              <input type="radio" name={picker ? 'picker' : 'color'} tabIndex={picker ? -1 : 0} />
+              <input
+                type="radio"
+                name={picker ? 'picker' : 'color'}
+                tabIndex={picker ? -1 : 0}
+                onClick={(e) => e.stopPropagation()}
+              />
             </label>
           );
 
@@ -128,7 +133,7 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
                   <DebouncedColorPanel color={value || ''} onChange={(c) => onChange?.(c)} />
                 }
                 trigger="click"
-                showArrow={false}
+                arrow={false}
               >
                 {colorNode}
               </Popover>

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -104,6 +104,7 @@ const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
     background,
     filePath,
     version,
+    clientOnly,
   } = props;
 
   const { pkg } = useSiteData();
@@ -169,6 +170,8 @@ const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
     setCodeExpand(expand);
   }, [expand]);
 
+  const mergedChildren = !iframe && clientOnly ? <ClientOnly>{children}</ClientOnly> : children;
+
   if (!liveDemo.current) {
     liveDemo.current = iframe ? (
       <BrowserFrame>
@@ -180,7 +183,7 @@ const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
         />
       </BrowserFrame>
     ) : (
-      children
+      mergedChildren
     );
   }
 

.dumi/theme/common/ClientOnly.tsx

@@ -1,5 +1,5 @@
 import type { FC, ReactElement, ReactNode } from 'react';
-import { useEffect, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 
 export type ClientOnlyProps = {
   children: ReactNode;
@@ -8,7 +8,7 @@ export type ClientOnlyProps = {
 const ClientOnly: FC<ClientOnlyProps> = ({ children }) => {
   const [clientReady, setClientReady] = useState<boolean>(false);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setClientReady(true);
   }, []);
 

.dumi/theme/layouts/GlobalLayout.tsx

@@ -5,15 +5,16 @@ import {
   parentSelectorLinter,
   StyleProvider,
 } from '@ant-design/cssinjs';
-import { ConfigProvider, theme as antdTheme, App } from 'antd';
+import { App, ConfigProvider, theme as antdTheme } from 'antd';
 import type { DirectionType } from 'antd/es/config-provider';
 import { createSearchParams, useOutlet, useSearchParams } from 'dumi';
-import React, { startTransition, useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import useLocation from '../../hooks/useLocation';
 import type { ThemeName } from '../common/ThemeSwitch';
 import ThemeSwitch from '../common/ThemeSwitch';
 import type { SiteContextProps } from '../slots/SiteContext';
 import SiteContext from '../slots/SiteContext';
+import useLayoutState from '../../hooks/useLayoutState';
 
 type Entries<T> = { [K in keyof T]: [K, T[K]] }[keyof T][];
 type SiteState = Partial<Omit<SiteContextProps, 'updateSiteContext'>>;
@@ -40,7 +41,7 @@ const GlobalLayout: React.FC = () => {
   const outlet = useOutlet();
   const { pathname } = useLocation();
   const [searchParams, setSearchParams] = useSearchParams();
-  const [{ theme, direction, isMobile }, setSiteState] = React.useState<SiteState>({
+  const [{ theme, direction, isMobile }, setSiteState] = useLayoutState<SiteState>({
     isMobile: false,
     direction: 'ltr',
     theme: ['light'],
@@ -85,11 +86,9 @@ const GlobalLayout: React.FC = () => {
     const _theme = searchParams.getAll('theme') as ThemeName[];
     const _direction = searchParams.get('direction') as DirectionType;
 
-    startTransition(() => {
+    setSiteState({ theme: _theme, direction: _direction === 'rtl' ? 'rtl' : 'ltr' });
-      setSiteState({ theme: _theme, direction: _direction === 'rtl' ? 'rtl' : 'ltr' });
+    // Handle isMobile
-      // Handle isMobile
+    updateMobileMode();
-      updateMobileMode();
-    });
 
     window.addEventListener('resize', updateMobileMode);
     return () => {

.github/workflows/chatgpt-cr.yml

@@ -0,0 +1,23 @@
+name: 🤖 ChatGPT Code Review
+
+permissions:
+  contents: read
+  pull-requests: write
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: anc95/ChatGPT-CodeReview@main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          # Optional
+          LANGUAGE: Chinese
+          MODEL:
+          top_p: 1
+          temperature: 1

.github/workflows/mock-project-build.yml

@@ -6,6 +6,11 @@ on:
   schedule:
     - cron: '*/30 * * * *'
 
+# Cancel prev CI if new commit come
+concurrency:
+  group: unique
+  cancel-in-progress: true
+
 jobs:
   pr-check-ci:
     runs-on: ubuntu-latest
@@ -18,9 +23,38 @@ jobs:
         with:
           node-version: 16
 
+      - uses: actions/cache@v3
+        with:
+          path: ~tmpProj/yarn.lock
+          key: primes-${{ runner.os }}-${{ github.run_id }}
+          restore-keys: mock-proj-lock-file
+
       - name: Run Script
         run: bash ./scripts/ci-mock-project-build.sh
 
+      ##################################################################
+      ##                        Diff Lock File                        ##
+      ##################################################################
+      - name: Rename failed lock file
+        if: ${{ failure() }}
+        run: mv ~tmpProj/yarn.lock ~tmpProj/yarn.lock.failed
+
+      - name: Download success lock file as `success.lock`
+        if: ${{ failure() }}
+        uses: actions/cache/restore@v3
+        with:
+          path: ~tmpProj/yarn.lock
+          key: primes-${{ runner.os }}-${{ github.run_id }}
+          restore-keys: mock-proj-lock-file
+
+      - name: ls tmpProj
+        if: ${{ failure() }}
+        run: ls ~tmpProj
+
+      - name: 🎨 Diff Report
+        if: ${{ failure() }}
+        run: npx diff-yarn-lock --source=~tmpProj/yarn.lock --target=~tmpProj/yarn.lock.failed
+
       - uses: actions-cool/ci-notice@v1
         if: ${{ failure() }}
         with:

CHANGELOG.en-US.md

@@ -15,6 +15,28 @@ timeline: true
 
 ---
 
+## 5.3.2
+
+`2023-03-20`
+
+- Anchor
+  - 💄 Fix Anchor redundant border style when it is set to horizontal direction. [#41336](https://github.com/ant-design/ant-design/pull/41336) [@gooyoung](https://github.com/gooyoung)
+  - 💄 Fix Anchor ink square style in `vertical` mode. [#41317](https://github.com/ant-design/ant-design/pull/41317) [@acyza](https://github.com/acyza)
+- 🐞 Fix Grid `offset` can not be overwritten problem under different device screen sizes. [#41309](https://github.com/ant-design/ant-design/pull/41309) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 Fix Breadcrumb `onClick` not working bug. [#41283](https://github.com/ant-design/ant-design/pull/41283) [@acyza](https://github.com/acyza)
+- 🐞 Fix Upload trigger Progress warning after upload. [#41234](https://github.com/ant-design/ant-design/pull/41234) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 Fix Table unexpected layout problem when dragging element to the right. [#41139](https://github.com/ant-design/ant-design/pull/41139) [@hoho2017](https://github.com/hoho2017)
+- 💄 Fix Tabs more icon color in dark mode. [#41313](https://github.com/ant-design/ant-design/pull/41313) [@PhosphorusP](https://github.com/PhosphorusP)
+- 💄 Fix Button focus outline style be covered by Dropdown.Button. [#41282](https://github.com/ant-design/ant-design/pull/41282) [@Yuiai01](https://github.com/Yuiai01)
+- 💄 Fix Input.TextArea style problem when focusing. [#41228](https://github.com/ant-design/ant-design/pull/41228) [@MuxinFeng](https://github.com/MuxinFeng)
+
+- RTL
+  - 💄 Fix Input.TextArea RTL style when enable `showCount`. [#41319](https://github.com/ant-design/ant-design/pull/41319) [@ds1371dani](https://github.com/ds1371dani)
+- TypeScript
+  - 🤖 Export `CountdownProps` for Statistic. [#41341](https://github.com/ant-design/ant-design/pull/41341) [@li-jia-nan](https://github.com/li-jia-nan)
+  - 🤖 Improve most alias token meta info. [#41297](https://github.com/ant-design/ant-design/pull/41297) [@arvinxx](https://github.com/arvinxx)
+  - 🤖 Improve Badge `React.forwardRef` type definition. [#41189](https://github.com/ant-design/ant-design/pull/41189) [@li-jia-nan](https://github.com/li-jia-nan)
+
 ## 5.3.1
 
 `2023-03-13`

CHANGELOG.zh-CN.md

@@ -15,6 +15,28 @@ timeline: true
 
 ---
 
+## 5.3.2
+
+`2023-03-20`
+
+- Anchor
+  - 💄 修复 Anchor 组件设置为水平方向时多余的 border 样式。[#41336](https://github.com/ant-design/ant-design/pull/41336) [@gooyoung](https://github.com/gooyoung)
+  - 💄 修复 Anchor 处于 `vertical` 方向时 ink 小方块的样式。[#41317](https://github.com/ant-design/ant-design/pull/41317) [@acyza](https://github.com/acyza)
+- 🐞 修复 Grid 在不同设备屏幕下的 `offset` 设置不会被覆盖的问题。[#41309](https://github.com/ant-design/ant-design/pull/41309) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 修复 Breadcrumb `onClick` 不工作的问题。[#41283](https://github.com/ant-design/ant-design/pull/41283) [@acyza](https://github.com/acyza)
+- 🐞 修复 Upload 在上传完毕后 Progress 组件抛出警告的问题。[#41234](https://github.com/ant-design/ant-design/pull/41234) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 修复 Table 在拖动元素一直右移时布局错误的问题。[#41139](https://github.com/ant-design/ant-design/pull/41139) [@hoho2017](https://github.com/hoho2017)
+- 💄 修复 Tabs 在深色模式下更多图标的色值。[#41313](https://github.com/ant-design/ant-design/pull/41313) [@PhosphorusP](https://github.com/PhosphorusP)
+- 💄 修复 Button 下拉时聚焦轮廓被其他元素遮挡的问题。[#41282](https://github.com/ant-design/ant-design/pull/41282) [@Yuiai01](https://github.com/Yuiai01)
+- 💄 修复 Input.TextArea 在 focus 状态下的样式问题。[#41228](https://github.com/ant-design/ant-design/pull/41228) [@MuxinFeng](https://github.com/MuxinFeng)
+
+- RTL
+  - 💄 修复 Input.TextArea 在启用 `showCount` 时 RTL 模式下位置不正确的问题。[#41319](https://github.com/ant-design/ant-design/pull/41319) [@ds1371dani](https://github.com/ds1371dani)
+- TypeScript
+  - 🤖 导出 Statistic 的 `CountdownProps` 类型。[#41341](https://github.com/ant-design/ant-design/pull/41341) [@li-jia-nan](https://github.com/li-jia-nan)
+  - 🤖 优化 token 的类型提示和说明。[#41297](https://github.com/ant-design/ant-design/pull/41297) [@arvinxx](https://github.com/arvinxx)
+  - 🤖 优化 Badge `React.forwardRef` 类型定义。[#41189](https://github.com/ant-design/ant-design/pull/41189) [@li-jia-nan](https://github.com/li-jia-nan)
+
 ## 5.3.1
 
 `2023-03-13`

components/calendar/index.en-US.md

@@ -15,11 +15,11 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 ## Examples
 
 <!-- prettier-ignore -->
-<code src="./demo/basic.tsx">Basic</code>
+<code src="./demo/basic.tsx" clientOnly>Basic</code>
-<code src="./demo/notice-calendar.tsx">Notice Calendar</code>
+<code src="./demo/notice-calendar.tsx" clientOnly>Notice Calendar</code>
-<code src="./demo/card.tsx">Card</code>
+<code src="./demo/card.tsx" clientOnly>Card</code>
-<code src="./demo/select.tsx">Selectable Calendar</code>
+<code src="./demo/select.tsx" clientOnly>Selectable Calendar</code>
-<code src="./demo/customize-header.tsx">Customize Header</code>
+<code src="./demo/customize-header.tsx" clientOnly>Customize Header</code>
 
 ## API
 

components/calendar/index.zh-CN.md

@@ -16,11 +16,11 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 ## 代码演示
 
 <!-- prettier-ignore -->
-<code src="./demo/basic.tsx">基本</code>
+<code src="./demo/basic.tsx" clientOnly>基本</code>
-<code src="./demo/notice-calendar.tsx">通知事项日历</code>
+<code src="./demo/notice-calendar.tsx" clientOnly>通知事项日历</code>
-<code src="./demo/card.tsx">卡片模式</code>
+<code src="./demo/card.tsx" clientOnly>卡片模式</code>
-<code src="./demo/select.tsx">选择功能</code>
+<code src="./demo/select.tsx" clientOnly>选择功能</code>
-<code src="./demo/customize-header.tsx">自定义头部</code>
+<code src="./demo/customize-header.tsx" clientOnly>自定义头部</code>
 
 ## API
 

components/statistic/demo/countdown.tsx

@@ -1,37 +1,36 @@
-import React from 'react';
+import type { CountdownProps } from 'antd';
 import { Col, Row, Statistic } from 'antd';
-import type { StatisticProps } from 'antd';
+import React from 'react';
 
 const { Countdown } = Statistic;
+
 const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Dayjs is also OK
 
-const App: React.FC = () => {
+const onFinish: CountdownProps['onFinish'] = () => {
-  const onFinish = () => {
+  console.log('finished!');
-    console.log('finished!');
-  };
-
-  const onChange = (val: StatisticProps['value']) => {
-    if (val && 4.95 * 1000 < val && val < 5 * 1000) {
-      console.log('changed!');
-    }
-  };
-
-  return (
-    <Row gutter={16}>
-      <Col span={12}>
-        <Countdown title="Countdown" value={deadline} onFinish={onFinish} />
-      </Col>
-      <Col span={12}>
-        <Countdown title="Million Seconds" value={deadline} format="HH:mm:ss:SSS" />
-      </Col>
-      <Col span={24} style={{ marginTop: 32 }}>
-        <Countdown title="Day Level" value={deadline} format="D 天 H 时 m 分 s 秒" />
-      </Col>
-      <Col span={12}>
-        <Countdown title="Countdown" value={Date.now() + 10 * 1000} onChange={onChange} />
-      </Col>
-    </Row>
-  );
 };
 
+const onChange: CountdownProps['onChange'] = (val) => {
+  if (typeof val === 'number' && 4.95 * 1000 < val && val < 5 * 1000) {
+    console.log('changed!');
+  }
+};
+
+const App: React.FC = () => (
+  <Row gutter={16}>
+    <Col span={12}>
+      <Countdown title="Countdown" value={deadline} onFinish={onFinish} />
+    </Col>
+    <Col span={12}>
+      <Countdown title="Million Seconds" value={deadline} format="HH:mm:ss:SSS" />
+    </Col>
+    <Col span={24} style={{ marginTop: 32 }}>
+      <Countdown title="Day Level" value={deadline} format="D 天 H 时 m 分 s 秒" />
+    </Col>
+    <Col span={12}>
+      <Countdown title="Countdown" value={Date.now() + 10 * 1000} onChange={onChange} />
+    </Col>
+  </Row>
+);
+
 export default App;

components/table/demo/virtual-list.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Table, theme } from 'antd';
 import type { TableProps } from 'antd';
+import { Table, theme } from 'antd';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
+import React, { useEffect, useRef, useState } from 'react';
 import { VariableSizeGrid as Grid } from 'react-window';
 
 const VirtualTable = <RecordType extends object>(props: TableProps<RecordType>) => {
@@ -62,7 +62,7 @@ const VirtualTable = <RecordType extends object>(props: TableProps<RecordType>)
         columnCount={mergedColumns.length}
         columnWidth={(index: number) => {
           const { width } = mergedColumns[index];
-          return totalHeight > scroll!.y! && index === mergedColumns.length - 1
+          return totalHeight > (scroll?.y as number) && index === mergedColumns.length - 1
             ? (width as number) - scrollbarSize - 1
             : (width as number);
         }}

docs/react/i18n.en-US.md

@@ -112,8 +112,8 @@ Do it step by step:
    ```bash
    git clone git@github.com:<your organization>/ant-design.git
    cd ant-design/
-   git remote add upstream origin git@github.com:ant-design/ant-design.git
+   git remote add upstream git@github.com:ant-design/ant-design.git
-   git checkout -b <your new branch name>
+   git checkout -b <your new branch name> upstream/feature
    ```
 
 2. Add the language support for [rc-picker](https://github.com/react-component/picker), for example [this](https://github.com/react-component/picker/blob/master/src/locale/en_US.ts).

docs/react/i18n.zh-CN.md

@@ -109,8 +109,8 @@ return (
    ```bash
    git clone git@github.com:<your organization>/ant-design.git
    cd ant-design/
-   git remote add upstream origin git@github.com:ant-design/ant-design.git
+   git remote add upstream git@github.com:ant-design/ant-design.git
-   git checkout -b <your new branch name>
+   git checkout -b <your new branch name> upstream/feature
    ```
 
 2. 为 [rc-picker](https://github.com/react-component/picker) 添加对应语言，参考 [这个](https://github.com/react-component/picker/blob/master/src/locale/en_US.ts)。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.3.1",
+  "version": "5.3.2",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [
@@ -203,7 +203,7 @@
     "cheerio": "1.0.0-rc.12",
     "cross-env": "^7.0.0",
     "dekko": "^0.2.1",
-    "dumi": "^2.1.13",
+    "dumi": "^2.1.17",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
     "esbuild-loader": "^3.0.0",
     "eslint": "^8.0.0",
@@ -245,7 +245,7 @@
     "lodash": "^4.17.21",
     "lz-string": "^1.4.4",
     "mockdate": "^3.0.0",
-    "open": "^8.0.1",
+    "open": "^9.0.0",
     "prettier": "^2.3.2",
     "prettier-plugin-jsdoc": "^0.4.2",
     "pretty-format": "^29.0.0",
@@ -284,7 +284,7 @@
     "terser": "^5.16.1",
     "ts-node": "^10.8.2",
     "typedoc": "^0.23.21",
-    "typescript": "~4.9.3",
+    "typescript": "~5.0.2",
     "vanilla-jsoneditor": "^0.16.0",
     "webpack-bundle-analyzer": "^4.1.0",
     "xhr-mock": "^2.4.1",

scripts/ci-mock-project-build.sh

@@ -6,8 +6,10 @@ rm -rf ~tmpProj/
 # clone project
 git clone https://github.com/ant-design/create-next-app-antd.git ~tmpProj --depth=1
 
-# install
+# change directory
 cd ~tmpProj
+
+# install dependencies
 yarn
 
 # build