Merge branch 'master' into feature-merge-master

.dumi/pages/theme-editor/index.tsx

@@ -1,9 +1,9 @@
-import React, { useCallback, useEffect, useState, Suspense, useLayoutEffect } from 'react';
+import { css } from '@emotion/react';
-import { enUS, ThemeEditor, zhCN } from 'antd-token-previewer';
+import { Button, ConfigProvider, Modal, Spin, Typography, message } from 'antd';
-import { Button, ConfigProvider, message, Modal, Spin, Typography } from 'antd';
+import { ThemeEditor, enUS, zhCN } from 'antd-token-previewer';
 import type { ThemeConfig } from 'antd/es/config-provider/context';
 import { Helmet } from 'dumi';
-import { css } from '@emotion/react';
+import React, { Suspense, useCallback, useEffect, useState } from 'react';
 import type { JSONContent, TextContent } from 'vanilla-jsoneditor';
 import useLocale from '../../hooks/useLocale';
 
@@ -64,21 +64,19 @@ const CustomTheme = () => {
     json: undefined,
   });
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const storedConfig = localStorage.getItem(ANT_DESIGN_V5_THEME_EDITOR_THEME);
     if (storedConfig) {
-      setTheme(() => JSON.parse(storedConfig));
+      const themeConfig = JSON.parse(storedConfig);
+      const originThemeConfig = {
+        json: themeConfig,
+        text: undefined,
+      };
+      setThemeConfigContent(originThemeConfig);
+      setTheme(themeConfig);
     }
   }, []);
 
-  useEffect(() => {
-    if (editModelOpen === true) return;
-    setThemeConfigContent({
-      json: theme as any,
-      text: undefined,
-    });
-  }, [theme, editModelOpen]);
-
   const styles = useStyle();
 
   const handleSave = () => {
@@ -96,18 +94,13 @@ const CustomTheme = () => {
 
   const handleEditConfigChange = (newcontent, preContent, status) => {
     setThemeConfigContent(newcontent);
-    if (
+    setEditThemeFormatRight(!status.contentErrors);
-      Array.isArray(status.contentErrors.validationErrors) &&
-      status.contentErrors.validationErrors.length === 0
-    ) {
-      setEditThemeFormatRight(true);
-    } else {
-      setEditThemeFormatRight(false);
-    }
   };
 
   const editSave = useCallback(() => {
-    if (!editThemeFormatRight) {
+    const contentFormatError = !editThemeFormatRight;
+
+    if (contentFormatError) {
       message.error(locale.editJsonContentTypeError);
       return;
     }
@@ -121,7 +114,7 @@ const CustomTheme = () => {
     setTheme(themeConfig);
     editModelClose();
     messageApi.success(locale.editSuccessfully);
-  }, [themeConfigContent]);
+  }, [themeConfigContent, editThemeFormatRight]);
 
   const handleExport = () => {
     const file = new File([JSON.stringify(theme, null, 2)], `Ant Design Theme.json`, {

.dumi/theme/common/JSONEditor/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
-import { JSONEditor, Mode } from 'vanilla-jsoneditor';
 import type { JSONEditorPropsOptional } from 'vanilla-jsoneditor';
+import { JSONEditor, Mode } from 'vanilla-jsoneditor';
 
 const Editor: React.FC<JSONEditorPropsOptional> = (props) => {
   const editorRef = useRef<JSONEditor>(null);
@@ -18,7 +18,7 @@ const Editor: React.FC<JSONEditorPropsOptional> = (props) => {
 
   useEffect(() => {
     editorRef.current?.updateProps(props);
-  }, [props]);
+  }, [props.content]);
 
   return <div ref={container} className="vanilla-jsoneditor-react" />;
 };

.github/workflows/site-deploy.yml

@@ -51,6 +51,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:

CHANGELOG.en-US.md

@@ -15,6 +15,29 @@ timeline: true
 
 ---
 
+## 5.5.1
+
+`2023-05-22`
+
+- 🐞 Fix wrong Button icon size and margin. [#42516](https://github.com/ant-design/ant-design/pull/42516) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix Select remove & selected icon not align in center. [#42513](https://github.com/ant-design/ant-design/pull/42513)
+- 🐞 Refactor Popconfirm DOM structure to fix extra margin before `title` and `description` when `icon={null}`. [#42433](https://github.com/ant-design/ant-design/pull/42433)
+- 🐞 Fix Menu item icon not centered when `itemMarginInline` is 0. [#42426](https://github.com/ant-design/ant-design/pull/42426) [@zzwgh](https://github.com/zzwgh)
+- 🐞 Fix Tag wrapped with Tooltip will use wrong `font-size` when hover. [#42414](https://github.com/ant-design/ant-design/pull/42414)
+- 🐞 Fix Popconfirm trigger `onVisibleChange` twice. [#42393](https://github.com/ant-design/ant-design/pull/42393)
+- 🐞 Adjust Tooltip & Popover display logic. Now the first priority is to ensure that it will not be clipped by `overflow: hidden`, and the second is to ensure that it is displayed within the viewport as much as possible. [#42394](https://github.com/ant-design/ant-design/pull/42394)
+- ColorPicker
+  - 🐞 Optimize ColorPicker the `allowClear` interaction logic, reopening the panel to select a color will default to 100% transparency instead of 0%. [#42439](https://github.com/ant-design/ant-design/pull/42439) [@RedJue](https://github.com/RedJue)
+  - 🐞 Optimize ColorPicker interaction. Now it will close panel when click clear button. [#42406](https://github.com/ant-design/ant-design/pull/42406) [@kiner-tang](https://github.com/kiner-tang)
+- 💄 Optimize border radius in filter dropdown of Table. [#42451](https://github.com/ant-design/ant-design/pull/42451) [@Yuiai01](https://github.com/Yuiai01)
+- 🛠 Remove `addEventListener` from `rc-util/lib/Dom/addEventListener` and use native `addEventListener` instead. [#42464](https://github.com/ant-design/ant-design/pull/42464) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🛠 Reduce 1KB @ant-design/icons bundle size. Fix TwoTone icon color to primary color of 5.0. [#42443](https://github.com/ant-design/ant-design/pull/42443)
+- 🌐 Add missing translation for `mn_MN`. [#42512](https://github.com/ant-design/ant-design/pull/42512) [@ariunbatb](https://github.com/ariunbatb)
+- RTL
+  - 💄 Fix Select scrollbar `rtl` direction position. [#42508](https://github.com/ant-design/ant-design/pull/42508) [@BoyYangzai](https://github.com/BoyYangzai)
+- TypeScript
+  - 🤖 Optimize Slider ref type definition, replace `unknown` and `any` with `SliderRef`. [#42420](https://github.com/ant-design/ant-design/pull/42420) [@li-jia-nan](https://github.com/li-jia-nan)
+
 ## 5.5.0
 
 `2023-05-15`

CHANGELOG.zh-CN.md

@@ -15,6 +15,29 @@ timeline: true
 
 ---
 
+## 5.5.1
+
+`2023-05-22`
+
+- 🐞 修复 Button 组件 icon 尺寸和间距问题。[#42516](https://github.com/ant-design/ant-design/pull/42516) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 Select 移除和选中按钮不居中的问题。[#42513](https://github.com/ant-design/ant-design/pull/42513)
+- 🐞 重构 Popconfirm DOM 结构以解决 `icon={null}` 时 `title` 和 `description` 的多余 margin 问题。[#42433](https://github.com/ant-design/ant-design/pull/42433)
+- 🐞 修复 Menu 图标在 `itemMarginInline` 为 0 时不居中的问题。[#42426](https://github.com/ant-design/ant-design/pull/42426) [@zzwgh](https://github.com/zzwgh)
+- 🐞 修复 Tag 被 Tooltip 包裹时，hover 会导致 `font-size` 错误的问题。[#42414](https://github.com/ant-design/ant-design/pull/42414)
+- 🐞 修复 Popconfirm 的 `onVisibleChange` 会重复触发的问题。[#42393](https://github.com/ant-design/ant-design/pull/42393)
+- 🐞 调整 Tooltip 和 Popover 展示逻辑，现在会优先保证不会被 `overflow: hidden` 裁剪，其次保证尽可能在可见屏幕范围内展示。[#42394](https://github.com/ant-design/ant-design/pull/42394)
+- ColorPicker
+  - 🐞 优化 ColorPicker `allowClear` 交互逻辑，重新打开面板选择颜色会默认 100% 透明度，而不是 0%。[#42439](https://github.com/ant-design/ant-design/pull/42439) [@RedJue](https://github.com/RedJue)
+  - 🐞 优化 ColorPicker 交互，点击清除按钮时隐藏面板。[#42406](https://github.com/ant-design/ant-design/pull/42406) [@kiner-tang](https://github.com/kiner-tang)
+- 💄 修改 Table 筛选下拉菜单的圆角。[#42451](https://github.com/ant-design/ant-design/pull/42451) [@Yuiai01](https://github.com/Yuiai01)
+- 🛠 全局移除 `rc-util/lib/Dom/addEventListener` 引入的 `addEventListener` 方法，用原生代替。[#42464](https://github.com/ant-design/ant-design/pull/42464) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🛠 优化 @ant-design/icons 的 bundle 体积大小。修复 TwoTone 类的图标色为 5.0 的新主色。[#42443](https://github.com/ant-design/ant-design/pull/42443)
+- 🌐 添加 `mn_MN` 中缺失的翻译。[#42512](https://github.com/ant-design/ant-design/pull/42512) [@ariunbatb](https://github.com/ariunbatb)
+- RTL
+  - 💄 修复 Select `direction` 为 `rtl` 时 scrollbar 的位置。[#42508](https://github.com/ant-design/ant-design/pull/42508) [@BoyYangzai](https://github.com/BoyYangzai)
+- TypeScript
+  - 🤖 优化 Slider ref 类型，移除 `unknown` 和 `any` 类型，用 `SliderRef` 代替。[#42420](https://github.com/ant-design/ant-design/pull/42420) [@li-jia-nan](https://github.com/li-jia-nan)
+
 ## 5.5.0
 
 `2023-05-15`

components/button/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -976,7 +976,7 @@ Array [
         </div>
         <div
           class="ant-space-item"
-          style="padding-bottom: 8px;"
+          style="margin-right: 8px; padding-bottom: 8px;"
         >
           <a
             class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only"
@@ -1007,6 +1007,38 @@ Array [
             </span>
           </a>
         </div>
+        <div
+          class="ant-space-item"
+          style="padding-bottom: 8px;"
+        >
+          <button
+            class="ant-btn ant-btn-default ant-btn-lg"
+            type="button"
+          >
+            <span
+              aria-label="search"
+              class="anticon anticon-search"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="search"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                />
+              </svg>
+            </span>
+            <span>
+              Search
+            </span>
+          </button>
+        </div>
       </div>
     </div>
   </div>,

components/button/__tests__/__snapshots__/demo.test.ts.snap

@@ -895,7 +895,7 @@ Array [
         </div>
         <div
           class="ant-space-item"
-          style="padding-bottom:8px"
+          style="margin-right:8px;padding-bottom:8px"
         >
           <a
             class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only"
@@ -926,6 +926,38 @@ Array [
             </span>
           </a>
         </div>
+        <div
+          class="ant-space-item"
+          style="padding-bottom:8px"
+        >
+          <button
+            class="ant-btn ant-btn-default ant-btn-lg"
+            type="button"
+          >
+            <span
+              aria-label="search"
+              class="anticon anticon-search"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="search"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                />
+              </svg>
+            </span>
+            <span>
+              Search
+            </span>
+          </button>
+        </div>
       </div>
     </div>
   </div>,

components/button/demo/debug-icon.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
 import { SearchOutlined } from '@ant-design/icons';
-import { Button, Tooltip, ConfigProvider, Radio, Divider, Space } from 'antd';
+import { Button, ConfigProvider, Divider, Radio, Space, Tooltip } from 'antd';
 import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import React, { useState } from 'react';
 
 const App: React.FC = () => {
   const [size, setSize] = useState<SizeType>('large');
@@ -45,6 +45,10 @@ const App: React.FC = () => {
               Search
             </Button>
             <Button icon={<SearchOutlined />} href="https://www.google.com" />
+            <Button>
+              <SearchOutlined />
+              Search
+            </Button>
           </Space>
         </Space>
       </ConfigProvider>

components/button/style/index.ts

@@ -47,17 +47,16 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
       },
 
       // Leave a space between icon and text.
+      [`> ${iconCls} + span, > span + ${iconCls}`]: {
+        marginInlineStart: token.marginXS,
+      },
+
       [`&:not(${componentCls}-icon-only) > ${componentCls}-icon`]: {
         [`&${componentCls}-loading-icon, &:not(:last-child)`]: {
           marginInlineEnd: token.marginXS,
         },
       },
 
-      // Special case for anticon after children
-      [`> span + ${iconCls}`]: {
-        marginInlineStart: token.marginXS,
-      },
-
       '> a': {
         color: 'currentColor',
       },

components/collapse/demo/extra.md

@@ -1,7 +1,7 @@
 ## zh-CN
 
-可以同时展开多个面板，这个例子默认展开了第一个。
+自定义渲染每个面板右上角的内容。
 
 ## en-US
 
-More than one panel can be expanded at a time, the first panel is initialized to be active in this case.
+Render extra element in the top-right corner of each panel.

components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -5066,6 +5066,72 @@ Array [
 ]
 `;
 
+exports[`renders components/dropdown/demo/icon-debug.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+        type="button"
+      >
+        <span>
+          Submit
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <div
+        class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-dropdown-placement-bottomRight"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <ul
+          class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
+          data-menu-list="true"
+          role="menu"
+          tabindex="0"
+        />
+        <div
+          aria-hidden="true"
+          style="display: none;"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/dropdown/demo/item.tsx extend context correctly 1`] = `
 Array [
   <a

components/dropdown/__tests__/__snapshots__/demo.test.tsx.snap

@@ -515,6 +515,57 @@ exports[`renders components/dropdown/demo/event.tsx correctly 1`] = `
 </a>
 `;
 
+exports[`renders components/dropdown/demo/icon-debug.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+        type="button"
+      >
+        <span>
+          Submit
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/dropdown/demo/item.tsx correctly 1`] = `
 <a
   class="ant-dropdown-trigger"

components/dropdown/demo/icon-debug.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+特殊处理 Down icon。
+
+## en-US
+
+Specially handle Down icon.

components/dropdown/demo/icon-debug.tsx

@@ -0,0 +1,13 @@
+import { DownOutlined } from '@ant-design/icons';
+import { Dropdown, Space } from 'antd';
+import React from 'react';
+
+const App: React.FC = () => (
+  <Space>
+    <Dropdown.Button icon={<DownOutlined />} menu={{ items: [] }}>
+      Submit
+    </Dropdown.Button>
+  </Space>
+);
+
+export default App;

components/dropdown/index.en-US.md

@@ -33,6 +33,7 @@ When there are more than a few options to choose from, you can wrap them in a `D
 <code src="./demo/selectable.tsx">Selectable Menu</code>
 <code src="./demo/menu-full.tsx" debug>Menu full styles</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/icon-debug.tsx" debug>Icon debug</code>
 
 ## API
 

components/dropdown/index.zh-CN.md

@@ -37,6 +37,7 @@ demo:
 <code src="./demo/selectable.tsx">菜单可选选择</code>
 <code src="./demo/menu-full.tsx" debug>Menu 完整样式</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/icon-debug.tsx" debug>Icon debug</code>
 
 ## API
 

components/dropdown/style/index.ts

@@ -70,9 +70,10 @@ const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
           content: '""',
         },
 
-        [`&-trigger${antCls}-btn > ${iconCls}-down`]: {
+        [`&-trigger${antCls}-btn`]: {
-          fontSize: fontSizeIcon,
+          [`& > ${iconCls}-down, & > ${antCls}-btn-icon > ${iconCls}-down`]: {
-          transform: 'none',
+            fontSize: fontSizeIcon,
+          },
         },
 
         [`${componentCls}-wrap`]: {

components/locale/__tests__/__snapshots__/index.test.tsx.snap

@@ -220128,7 +220128,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
                 type="button"
               >
                 <span>
-                  OK
+                  Тийм
                 </span>
               </button>
             </div>
@@ -221713,7 +221713,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
               type="button"
             >
               <span>
-                OK
+                Тийм
               </span>
             </button>
           </div>

components/locale/mn_MN.ts

@@ -1,7 +1,7 @@
 import Pagination from 'rc-pagination/lib/locale/mn_MN';
+import type { Locale } from '.';
 import Calendar from '../calendar/locale/mn_MN';
 import DatePicker from '../date-picker/locale/mn_MN';
-import type { Locale } from '.';
 import TimePicker from '../time-picker/locale/mn_MN';
 
 const localeValues: Locale = {
@@ -12,18 +12,18 @@ const localeValues: Locale = {
   Calendar,
   Table: {
     filterTitle: 'Хайх цэс',
-    filterConfirm: 'OK',
+    filterConfirm: 'Тийм',
     filterReset: 'Цэвэрлэх',
     selectAll: 'Бүгдийг сонгох',
     selectInvert: 'Бусдыг сонгох',
   },
   Modal: {
-    okText: 'OK',
+    okText: 'Тийм',
     cancelText: 'Цуцлах',
-    justOkText: 'OK',
+    justOkText: 'Тийм',
   },
   Popconfirm: {
-    okText: 'OK',
+    okText: 'Тийм',
     cancelText: 'Цуцлах',
   },
   Transfer: {

components/message/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1,40 +1,76 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders components/message/demo/component-token.tsx extend context correctly 1`] = `
-<div
+Array [
-  class="ant-message-notice ant-message-notice-pure-panel"
->
   <div
-    class="ant-message-notice-content"
+    class="ant-message-notice ant-message-notice-pure-panel"
   >
     <div
-      class="ant-message-custom-content ant-message-error"
+      class="ant-message-notice-content"
     >
-      <span
+      <div
-        aria-label="close-circle"
+        class="ant-message-custom-content ant-message-error"
-        class="anticon anticon-close-circle"
-        role="img"
       >
-        <svg
+        <span
-          aria-hidden="true"
+          aria-label="close-circle"
-          data-icon="close-circle"
+          class="anticon anticon-close-circle"
-          fill="currentColor"
+          role="img"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
         >
-          <path
+          <svg
-            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            aria-hidden="true"
-          />
+            data-icon="close-circle"
-        </svg>
+            fill="currentColor"
-      </span>
+            focusable="false"
-      <span>
+            height="1em"
-        Hello World!
+            viewBox="64 64 896 896"
-      </span>
+            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 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            />
+          </svg>
+        </span>
+        <span>
+          Hello World!
+        </span>
+      </div>
     </div>
-  </div>
+  </div>,
-</div>
+  <div
+    class="ant-message-notice ant-message-notice-pure-panel"
+  >
+    <div
+      class="ant-message-notice-content"
+    >
+      <div
+        class="ant-message-custom-content ant-message-error"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-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 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            />
+          </svg>
+        </span>
+        <span>
+          Hello World!
+        </span>
+      </div>
+    </div>
+  </div>,
+]
 `;
 
 exports[`renders components/message/demo/custom-style.tsx extend context correctly 1`] = `

components/message/__tests__/__snapshots__/demo.test.ts.snap

@@ -1,40 +1,76 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders components/message/demo/component-token.tsx correctly 1`] = `
-<div
+Array [
-  class="ant-message-notice ant-message-notice-pure-panel"
->
   <div
-    class="ant-message-notice-content"
+    class="ant-message-notice ant-message-notice-pure-panel"
   >
     <div
-      class="ant-message-custom-content ant-message-error"
+      class="ant-message-notice-content"
     >
-      <span
+      <div
-        aria-label="close-circle"
+        class="ant-message-custom-content ant-message-error"
-        class="anticon anticon-close-circle"
-        role="img"
       >
-        <svg
+        <span
-          aria-hidden="true"
+          aria-label="close-circle"
-          data-icon="close-circle"
+          class="anticon anticon-close-circle"
-          fill="currentColor"
+          role="img"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
         >
-          <path
+          <svg
-            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            aria-hidden="true"
-          />
+            data-icon="close-circle"
-        </svg>
+            fill="currentColor"
-      </span>
+            focusable="false"
-      <span>
+            height="1em"
-        Hello World!
+            viewBox="64 64 896 896"
-      </span>
+            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 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            />
+          </svg>
+        </span>
+        <span>
+          Hello World!
+        </span>
+      </div>
     </div>
-  </div>
+  </div>,
-</div>
+  <div
+    class="ant-message-notice ant-message-notice-pure-panel"
+  >
+    <div
+      class="ant-message-notice-content"
+    >
+      <div
+        class="ant-message-custom-content ant-message-error"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-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 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            />
+          </svg>
+        </span>
+        <span>
+          Hello World!
+        </span>
+      </div>
+    </div>
+  </div>,
+]
 `;
 
 exports[`renders components/message/demo/custom-style.tsx correctly 1`] = `

components/message/demo/component-token.tsx

@@ -1,20 +1,33 @@
-import React from 'react';
 import { ConfigProvider, message } from 'antd';
+import React from 'react';
 
 /** Test usage. Do not use in your production. */
 const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = message;
 
 export default () => (
-  <ConfigProvider
+  <>
-    theme={{
+    <ConfigProvider
-      components: {
+      theme={{
-        Message: {
+        components: {
-          contentPadding: 40,
+          Message: {
-          contentBg: '#e6f4ff',
+            contentPadding: 40,
+            contentBg: '#e6f4ff',
+          },
         },
-      },
+      }}
-    }}
+    >
-  >
+      <InternalPanel content="Hello World!" type="error" />
-    <InternalPanel content="Hello World!" type="error" />
+    </ConfigProvider>
-  </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Message: {
+            colorBgElevated: '#e6f4ff',
+          },
+        },
+      }}
+    >
+      <InternalPanel content="Hello World!" type="error" />
+    </ConfigProvider>
+  </>
 );

components/select/index.en-US.md

@@ -95,7 +95,7 @@ Select component to select value from options.
 | showSearch | Whether select is searchable | boolean | single: false, multiple: true |  |
 | size | Size of Select input | `large` \| `middle` \| `small` | `middle` |  |
 | status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
-| suffixIcon | The custom suffix icon | ReactNode | - |  |
+| suffixIcon | The custom suffix icon. Customize icon will not response click open to avoid icon designed to do other interactive. You can use `pointer-events: none` style to bypass | ReactNode | - |  |
 | tagRender | Customize tag render, only applies when `mode` is set to `multiple` or `tags` | (props) => ReactNode | - |  |
 | tokenSeparators | Separator used to tokenize, only applies when `mode="tags"` | string\[] | - |  |
 | value | Current selected option (considered as a immutable array) | string \| string\[] \| <br />number \| number\[] \| <br />LabeledValue \| LabeledValue\[] | - |  |

components/select/index.zh-CN.md

@@ -96,7 +96,7 @@ demo:
 | showSearch | 配置是否可搜索 | boolean | 单选为 false，多选为 true |  |
 | size | 选择框大小 | `large` \| `middle` \| `small` | `middle` |  |
 | status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
-| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
+| suffixIcon | 自定义的选择框后缀图标。以防止图标被用于其他交互，替换的图标默认不会响应展开、收缩事件，可以通过添加 `pointer-events: none` 样式透传。 | ReactNode | - |  |
 | tagRender | 自定义 tag 内容 render，仅在 `mode` 为 `multiple` 或 `tags` 时生效 | (props) => ReactNode | - |  |
 | tokenSeparators | 自动分词的分隔符，仅在 `mode="tags"` 时生效 | string\[] | - |  |
 | value | 指定当前选中的条目，多选时为一个数组。（value 数组引用未变化时，Select 不会更新） | string \| string\[] \| <br />number \| number\[] \| <br />LabeledValue \| LabeledValue\[] | - |  |

components/select/style/dropdown.tsx

@@ -1,5 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { SelectToken } from '.';
+import { resetComponent, textEllipsis } from '../../style';
 import {
   initMoveMotion,
   initSlideMotion,
@@ -9,7 +10,6 @@ import {
   slideUpOut,
 } from '../../style/motion';
 import type { GenerateStyle } from '../../theme/internal';
-import { resetComponent, textEllipsis } from '../../style';
 
 const genItemStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
   const { controlPaddingHorizontal } = token;
@@ -112,6 +112,8 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
 
             '&-state': {
               flex: 'none',
+              display: 'flex',
+              alignItems: 'center',
             },
 
             [`&-active:not(${selectItemCls}-option-disabled)`]: {

components/select/style/multiple.tsx

@@ -120,7 +120,8 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
         '&-remove': {
           ...resetIcon(),
 
-          display: 'inline-block',
+          display: 'inline-flex',
+          alignItems: 'center',
           color: token.colorIcon,
           fontWeight: 'bold',
           fontSize: 10,

components/theme/util/genComponentStyleHook.ts

@@ -5,7 +5,7 @@ import { warning } from 'rc-util';
 import { useContext } from 'react';
 import { ConfigContext } from '../../config-provider/context';
 import { genCommonStyle, genLinkStyle } from '../../style';
-import type { ComponentTokenMap, GlobalToken } from '../interface';
+import type { ComponentTokenMap, GlobalToken, OverrideToken } from '../interface';
 import type { UseComponentStyleResult } from '../internal';
 import { mergeToken, statisticToken, useToken } from '../internal';
 
@@ -15,7 +15,7 @@ export type GlobalTokenWithComponent<ComponentName extends OverrideComponent> =
   ComponentTokenMap[ComponentName];
 
 type ComponentToken<ComponentName extends OverrideComponent> = Exclude<
-  OverrideTokenWithoutDerivative[ComponentName],
+  OverrideToken[ComponentName],
   undefined
 >;
 type ComponentTokenKey<ComponentName extends OverrideComponent> =
@@ -80,9 +80,11 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
       useStyleRegister({ ...sharedConfig, path: [component, prefixCls, iconPrefixCls] }, () => {
         const { token: proxyToken, flush } = statisticToken(token);
 
-        const defaultComponentToken =
-          typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken;
         const customComponentToken = token[component] as ComponentToken<ComponentName>;
+        const defaultComponentToken =
+          typeof getDefaultToken === 'function'
+            ? getDefaultToken(mergeToken(proxyToken, customComponentToken ?? {}))
+            : getDefaultToken;
         const mergedComponentToken = { ...defaultComponentToken, ...customComponentToken };
 
         if (options?.deprecatedTokens) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.5.0",
+  "version": "5.5.1",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [
@@ -323,4 +323,4 @@
     "*.{ts,tsx,js,jsx}": "prettier --ignore-unknown --write",
     "*.{json,less,md}": "prettier --ignore-unknown --write"
   }
-}
+}