Merge branch 'master' into feature

components/_util/styleChecker.ts

@@ -25,10 +25,17 @@ export const detectFlexGapSupported = () => {
   flex.appendChild(document.createElement('div'));
   flex.appendChild(document.createElement('div'));
 
+  // some browser may not repaint when remove nodes, so we need create a new layer to detect.
+  const container = document.createElement('div');
+  container.style.position = 'absolute';
+  container.style.zIndex = '-9999';
+  container.appendChild(flex);
+
+
   // append to the DOM (needed to obtain scrollHeight)
-  document.body.appendChild(flex);
+  document.body.appendChild(container);
   flexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
-  document.body.removeChild(flex);
+  document.body.removeChild(container);
 
   return flexGapSupported;
 };

components/menu/style/index.tsx

@@ -859,6 +859,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
         ['colorActiveBarWidth', 'activeBarWidth'],
         ['colorActiveBarHeight', 'activeBarHeight'],
         ['colorActiveBarBorderSize', 'activeBarBorderWidth'],
+        ['colorItemBgSelected', 'itemSelectedBg'],
       ],
     },
   );

docs/blog/extract-ssr.en-US.md

@@ -150,7 +150,7 @@ Then add the corresponding CSS file on the HTML template side:
 </html>
 ```
 
-Click [here](https://github.com/ant-design/create-next-app-antd/tree/generate-css-on-demand) for complete implementation.
+Click [here](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-generate-css-on-demand) for complete implementation.
 
 Corresponding CSS will be generated when visiting different pages, and each CSS will have its corresponding Hash value. When the Hash hits, it means that the CSS file has been placed on the disk and can be used directly. Then, for the client, it is a normal CSS file access and also enjoys the caching capability.
 

docs/blog/extract-ssr.zh-CN.md

@@ -150,7 +150,7 @@ if (!fs.existsSync(cssFileName)) {
 </html>
 ```
 
-完整实现点击[此处](https://github.com/ant-design/create-next-app-antd/tree/generate-css-on-demand)查阅。
+完整实现点击[此处](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-generate-css-on-demand)查阅。
 
 访问不同的页面时会生成对应的 CSS，每个 CSS 都会有其对应的 Hash 值。当 Hash 命中时，则说明该 CSS 文件已经被落盘，可以直接使用。继而对于客户端而言就是一次正常的 CSS 文件访问，同样享受缓存能力。
 

docs/blog/mock-project-build.en-US.md

@@ -30,7 +30,7 @@ When we find relevant updates, we will install the previous version for comparis
 
 ### Schedule build
 
-As you see, the above troubleshooting method has a certain lag. We hope to reduce additional human labor by building regularly, and at the same time allow us to find problems faster. So we reused the [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) project as the base (in this way, if something goes wrong with the template project, we can also be detected in advance). Created a `mock-project-build.yml` CI that executes every half hour, which periodically pulls [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) repo to build:
+As you see, the above troubleshooting method has a certain lag. We hope to reduce additional human labor by building regularly, and at the same time allow us to find problems faster. So we reused the [create-next-app-antd](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style) project as the base (in this way, if something goes wrong with the template project, we can also be detected in advance). Created a `mock-project-build.yml` CI that executes every half hour, which periodically pulls [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) repo to build:
 
 ```yml
 on:

docs/blog/mock-project-build.zh-CN.md

@@ -30,7 +30,7 @@ Ant Design 作为大型组件库，内部依赖十分复杂。有时候 antd 代
 
 ### 定时构建
 
-如你所见，上述的排查方式有一定的滞后性。我们希望通过定时构建的方式减少额外的人力劳动，同时也能让我们更快的发现问题。因而我们复用了 [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) 项目作为基底（这样，如果模板项目出了问题，我们同样可以提前发现）。创建了一个每半小时执行一次的 `mock-project-build.yml` CI，它会定期拉取 [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) repo 进行构建：
+如你所见，上述的排查方式有一定的滞后性。我们希望通过定时构建的方式减少额外的人力劳动，同时也能让我们更快的发现问题。因而我们复用了 [create-next-app-antd](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style) 项目作为基底（这样，如果模板项目出了问题，我们同样可以提前发现）。创建了一个每半小时执行一次的 `mock-project-build.yml` CI，它会定期拉取 [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) repo 进行构建：
 
 ```yml
 on:

docs/react/contributing.en-US.md

@@ -55,6 +55,7 @@ The core team is monitoring for pull requests. We will review your pull request
 5. Run `npm test -- -u` to update the [jest snapshots](https://jestjs.io/docs/snapshot-testing) and commit these changes as well (if there are any updates).
 6. Ensure the UI change passes `npm run test-image`，Run `npm run test-image -- -u` to update UI snapshots and commit these changes as well (if there are any updates), **UI test base on [Docker](https://docs.docker.com/get-docker/), need download the corresponding installation according to the platform**
 7. Make sure your code lints (npm run lint). Tip: Lint runs automatically when you `git commit` (Use [Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)).
+8. Finally, please make sure that all GitHub CI checks pass, if they fail, you can click `detail` to enter the details to view the reason.
 
 Sending a Pull Request to [react-component](https://github.com/react-component/):
 

docs/react/contributing.zh-CN.md

@@ -55,6 +55,7 @@ Ant Design 团队会关注所有的 pull request，我们会 review 以及合并
 5. 运行 `npm test -- -u` 来更新 [jest snapshot](https://jestjs.io/zh-Hans/docs/snapshot-testing) 并且把这些更新也提交上来（如果有的话）。
 6. 确认所有的 UI 改动通过 `npm run test-image`，可以运行 `npm run test-image -- -u` 更新 UI 快照并且把这些更新也提交上来（如果有的话），**UI 测试基于 [Docker](https://docs.docker.com/get-docker/)，根据平台下载对应的安装程序。**
 7. 确保你的代码通过了 lint 检查 `npm run lint`. 小贴士: Lint 会在你 `git commit` 的时候自动运行（通过[Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)）。
+8. 最后请确保所有 GitHub CI 检查通过，如果失败，可点击 `detail` 进入详情查看原因。
 
 给 [react-component](https://github.com/react-component/) 发送 pull request：
 

docs/react/customize-theme.en-US.md

@@ -411,7 +411,7 @@ fs.writeFileSync(outputPath, css);
 
 You can choose to execute this script before starting the development command or before compiling. Running this script will generate a full antd.min.css file directly in the specified directory of the current project (e.g. public).
 
-Take Next.js for example（[example](https://github.com/ant-design/create-next-app-antd)）：
+Take Next.js for example（[example](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style)）：
 
 ```json
 // package.json
@@ -605,7 +605,7 @@ export default class MyDocument extends Document {
 }
 ```
 
-See the demo：[Export the css files on demand demo](https://github.com/ant-design/create-next-app-antd/tree/generate-css-on-demand)
+See the demo：[Export the css files on demand demo](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-generate-css-on-demand)
 
 ### Shadow DOM Usage
 

docs/react/customize-theme.zh-CN.md

@@ -407,7 +407,7 @@ fs.writeFileSync(outputPath, css);
 
 你可以选择在启动开发命令或编译前执行这个脚本，运行上述脚本将会在当前项目的指定（如： public 目录）目录下直接生成一个全量的 antd.min.css 文件。
 
-以 Next.js 为例（[参考示例](https://github.com/ant-design/create-next-app-antd)）：
+以 Next.js 为例（[参考示例](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style)）：
 
 ```json
 // package.json
@@ -601,7 +601,7 @@ export default class MyDocument extends Document {
 }
 ```
 
-演示示例请看：[按需抽取样式示例](https://github.com/ant-design/create-next-app-antd/tree/generate-css-on-demand)
+演示示例请看：[按需抽取样式示例](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-generate-css-on-demand)
 
 ### 兼容旧版浏览器
 

docs/react/getting-started.en-US.md

@@ -94,7 +94,7 @@ OK! Now that you know the basics of using antd components, you are welcome to ex
 During actual real-world project development, you will most likely need a development workflow consisting of `compile/build/deploy/lint/debug/` deployment. You can read the following documents on the subject or use the following scaffolds and examples provided below:
 
 - [Ant Design Pro](https://pro.ant.design/)
-- [create-next-app](https://github.com/ant-design/create-next-app-antd)
+- [create-next-app](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style)
 - More scaffolds at [Scaffold Market](https://scaffold.ant.design/)
 
 ## Test with Jest
@@ -113,6 +113,6 @@ Jest does not support `esm` modules, and Ant Design uses them. In order to test
 
 ## Customize your Workflow
 
-If you want to customize your workflow, we recommend using [webpack](https://webpack.js.org) to build and debug code. You can try out plenty of [boilerplates](https://github.com/enaqx/awesome-react#react-tools) available in the React ecosystem.
+If you want to customize your workflow, we recommend using [webpack](https://webpack.js.org) or [vite](https://vitejs.dev/) to build and debug code. You can try out plenty of [boilerplates](https://github.com/enaqx/awesome-react#react-tools) available in the React ecosystem.
 
 There are also some [scaffolds](https://scaffold.ant.design/) which have already been integrated into antd, so you can try and start with one of these and even contribute.

docs/react/getting-started.zh-CN.md

@@ -96,7 +96,7 @@ createRoot(document.getElementById('root')).render(<App />);
 实际项目开发中，你会需要构建、调试、代理、打包部署等一系列工程化的需求。您可以阅读后面的文档或者使用以下脚手架和范例：
 
 - [Ant Design Pro](https://pro.ant.design/)
-- [create-next-app](https://github.com/ant-design/create-next-app-antd)
+- [create-next-app](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style)
 - 更多脚手架可以查看 [脚手架市场](https://scaffold.ant.design/)
 
 ## 按需加载
@@ -105,6 +105,6 @@ createRoot(document.getElementById('root')).render(<App />);
 
 ## 自行构建
 
-如果想自己维护工作流，我们推荐使用 [webpack](https://webpack.js.org) 进行构建和调试，可以使用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#react-tools) 进行开发。
+如果想自己维护工作流，我们推荐使用 [webpack](https://webpack.js.org) 或者 [vite](https://cn.vitejs.dev/) 进行构建和调试，可以使用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#react-tools) 进行开发。
 
 目前社区也有很多基于 antd 定制的 [React 脚手架](https://scaffold.ant.design/)，欢迎进行试用和贡献。

docs/react/use-with-next.en-US.md

@@ -24,15 +24,15 @@ Open the browser at http://localhost:3000/. if you see the NEXT logo, it is cons
 
 ## Import antd
 
-Now we install `antd` from yarn or npm.
+Now we install `antd` from yarn or npm or pnpm.
 
-```bash
+<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
-$ npm install antd --save
-```
 
 Modify `src/app/page.tsx`, import Button component from `antd`.
 
 ```jsx
+'use client';
+
 import React from 'react';
 import { Button } from 'antd';
 

docs/react/use-with-next.zh-CN.md

@@ -24,15 +24,15 @@ $ npm run dev
 
 ## 引入 antd
 
-现在从 yarn 或 npm 安装并引入 antd。
+现在从 yarn 或 npm 或 pnpm 安装并引入 antd。
 
-```bash
+<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
-$ npm install antd --save
-```
 
 修改 `src/app/page.tsx`，引入 antd 的按钮组件。
 
 ```jsx
+'use client';
+
 import React from 'react';
 import { Button } from 'antd';
 

docs/react/use-with-vite.en-US.md

@@ -43,11 +43,9 @@ Below is the default directory structure.
 └── vite.config.ts
 ```
 
-Now we install `antd` from yarn or npm.
+Now we install `antd` from yarn or npm or pnpm.
 
-```bash
+<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
-$ npm install antd --save
-```
 
 Modify `src/App.js`, import Button component from `antd`.
 

docs/react/use-with-vite.zh-CN.md

@@ -43,11 +43,9 @@ $ npm run dev
 └── vite.config.js
 ```
 
-现在从 yarn 或 npm 安装并引入 antd。
+现在从 yarn 或 npm 或 pnpm 安装并引入 antd。
 
-```bash
+<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
-$ npm install antd --save
-```
 
 修改 `src/App.js`，引入 antd 的按钮组件。
 

scripts/ci-mock-project-build.sh

@@ -4,10 +4,10 @@
 rm -rf ~tmpProj/
 
 # clone project
-git clone https://github.com/ant-design/create-next-app-antd.git ~tmpProj --depth=1
+git clone https://github.com/ant-design/ant-design-examples.git ~tmpProj --depth=1
 
 # change directory
-cd ~tmpProj
+cd ~tmpProj/examples/with-nextjs-inline-style
 
 # install dependencies
 yarn