Merge pull request #48573 from ant-design/master

chore: merge master into feature

BUG_VERSIONS.json

@@ -53,5 +53,6 @@
   "5.13.0": ["https://github.com/ant-design/ant-design/pull/46962"],
   "5.14.0": ["https://github.com/ant-design/ant-design/issues/47354"],
   "5.15.0": ["https://github.com/ant-design/ant-design/pull/47504#issuecomment-1980459433"],
-  ">= 5.16.0 <= 5.16.1": ["https://github.com/ant-design/ant-design/issues/48200"]
+  ">= 5.16.0 <= 5.16.1": ["https://github.com/ant-design/ant-design/issues/48200"],
+  "5.16.3": ["https://github.com/ant-design/ant-design/issues/48568"]
 }

CHANGELOG.en-US.md

@@ -16,6 +16,36 @@ tag: vVERSION
 
 ---
 
+## 5.16.4
+
+`2024-04-22`
+
+- 🐞 Fix Select with `multiple` and `paddingXXS=0` will break the height align of `controlHeight` token. [#48574](https://github.com/ant-design/ant-design/pull/48574)
+- 🐞 Fix Upload miss style when enable CSS Variable. [#48569](https://github.com/ant-design/ant-design/pull/48569) [@nova1751](https://github.com/nova1751)
+- 🐞 Fix Slider in `range` tooltip blink when drag the handle over another one. [#48536](https://github.com/ant-design/ant-design/pull/48536)
+- Input
+  - 🐞 Fix the text of the button is not the large size when Input.Search is set to a large size. [#48527](https://github.com/ant-design/ant-design/pull/48527)
+  - 🐞 Fix abnormal text display in Input.TextArea. [#48489](https://github.com/ant-design/ant-design/pull/48489) [@korkt-kim](https://github.com/korkt-kim)
+- 🐞 Fix the stuck animation effect of the Upload component image. [#48522](https://github.com/ant-design/ant-design/pull/48522) [@nova1751](https://github.com/nova1751)
+- 🐞 Fix the issue where the Switch component using `checkedChildren` and `unCheckedChildren` did not add a default height. [#48513](https://github.com/ant-design/ant-design/pull/48513) [@wanpan11](https://github.com/wanpan11)
+- 🐞 Fix the warning reminder when Form.Item uses noStyle with no value. [#48508](https://github.com/ant-design/ant-design/pull/48508)
+- 🐞 Fix Popover `defaultOpen` setting failed. [#48481](https://github.com/ant-design/ant-design/pull/48481) [@linhf123](https://github.com/linhf123)
+- 🐞 Fix where `placeholder` is not displayed when DatePicker is configured with `multiple`. [#48387](https://github.com/ant-design/ant-design/pull/48387) [@nova1751](https://github.com/nova1751)
+- 🐞 Fix where ColorPicker clear color could not be changed when controlled in strict mode. [#48450](https://github.com/ant-design/ant-design/pull/48450)
+- 💄 Fix the arrow style issue when Collapse uses third-party icons. [#48417](https://github.com/ant-design/ant-design/pull/48417) [@guoyunhe](https://github.com/guoyunhe)
+- 💄 Optimize the animation effect of the embedded Menu Sider when it is expanded. [#48127](https://github.com/ant-design/ant-design/pull/48127) [@metouch](https://github.com/metouch)
+- 💄 Optimize Steps process style. [#48464](https://github.com/ant-design/ant-design/pull/48464)
+- Locales
+  - 🇨🇳 Add zh_CN zh_HK zh_TW Table licales. [#48543](https://github.com/ant-design/ant-design/pull/48543) [@thinkasany](https://github.com/thinkasany)
+  - 🇮🇩 Add id_ID DatePicker Form Table etc. locales. [#48537](https://github.com/ant-design/ant-design/pull/48537) [#48287](https://github.com/ant-design/ant-design/pull/48287) [@edikurniawan-dev](https://github.com/edikurniawan-dev)
+  - 🌐 Optimize Transfer localization to use `deselectAll` locale when need deselect all. [#48553](https://github.com/ant-design/ant-design/pull/48553) [@coderz-w](https://github.com/coderz-w)
+
+## 5.16.3
+
+`2024-04-21`
+
+- 🛠 Script failed to publish an empty package. Do not use this version.
+
 ## 5.16.2
 
 `2024-04-15`

CHANGELOG.zh-CN.md

@@ -15,6 +15,36 @@ tag: vVERSION
 
 ---
 
+## 5.16.4
+
+`2024-04-22`
+
+- 🐞 修复 Select 配置 `paddingXXS=0` 时，多选下超出设定的 `controlHeight` token 的问题。[#48574](https://github.com/ant-design/ant-design/pull/48574)
+- 🐞 修复 Upload 在开启 CSS Variable 时样式丢失的问题。[#48569](https://github.com/ant-design/ant-design/pull/48569) [@nova1751](https://github.com/nova1751)
+- 🐞 修复 Slider 在范围选择下，拖动滑块越过另一个滑块时提示框闪动的问题。[#48536](https://github.com/ant-design/ant-design/pull/48536)
+- Input
+  - 🐞 修复 Input.Search 设置大尺寸时，按钮的文字不是大尺寸的问题。[#48527](https://github.com/ant-design/ant-design/pull/48527)
+  - 🐞 修复 Input.TextArea 的文字显示异常问题。[#48489](https://github.com/ant-design/ant-design/pull/48489) [@korkt-kim](https://github.com/korkt-kim)
+- 🐞 修复 Upload 组件图片卡顿的动画效果。[#48522](https://github.com/ant-design/ant-design/pull/48522) [@nova1751](https://github.com/nova1751)
+- 🐞 修复 Switch 组件使用 `checkedChildren` `unCheckedChildren` 未添加默认高度的问题。[#48513](https://github.com/ant-design/ant-design/pull/48513) [@wanpan11](https://github.com/wanpan11)
+- 🐞 修复 Form.Item 使用 noStyle 无值时的警告提醒。[#48508](https://github.com/ant-design/ant-design/pull/48508)
+- 🐞 修复 Popover `defaultOpen` 设置失效的问题。[#48481](https://github.com/ant-design/ant-design/pull/48481) [@linhf123](https://github.com/linhf123)
+- 🐞 修复 DatePicker 配置 `multiple` 时 `placeholder` 不展示的问题。[#48387](https://github.com/ant-design/ant-design/pull/48387) [@nova1751](https://github.com/nova1751)
+- 🐞 修复 ColorPicker 在严格模式下受控时清除颜色无法改变的问题。[#48450](https://github.com/ant-design/ant-design/pull/48450)
+- 💄 修复 Collapse 使用第三方图标时的 arrow 样式问题。[#48417](https://github.com/ant-design/ant-design/pull/48417) [@guoyunhe](https://github.com/guoyunhe)
+- 💄 优化内嵌 Menu 的 Sider 在展开时的动画效果。[#48127](https://github.com/ant-design/ant-design/pull/48127) [@metouch](https://github.com/metouch)
+- 💄 优化 Steps process 样式。[#48464](https://github.com/ant-design/ant-design/pull/48464)
+- 国际化
+  - 🇨🇳 补充 zh_CN zh_HK zh_TW Table 文案。[#48543](https://github.com/ant-design/ant-design/pull/48543) [@thinkasany](https://github.com/thinkasany)
+  - 🇮🇩 补充 id_ID DatePicker Form Table 等文案。[#48537](https://github.com/ant-design/ant-design/pull/48537) [#48287](https://github.com/ant-design/ant-design/pull/48287) [@edikurniawan-dev](https://github.com/edikurniawan-dev)
+  - 🌐 优化 Transfer 本地化，现在反选会使用 `deselectAll` locale 配置。[#48553](https://github.com/ant-design/ant-design/pull/48553) [@coderz-w](https://github.com/coderz-w)
+
+## 5.16.3
+
+`2024-04-21`
+
+- 🛠 脚本错误发布空包，请勿使用。
+
 ## 5.16.2
 
 `2024-04-15`

components/date-picker/locale/id_ID.ts

@@ -7,7 +7,15 @@ import type { PickerLocale } from '../generatePicker';
 const locale: PickerLocale = {
   lang: {
     placeholder: 'Pilih tanggal',
-    rangePlaceholder: ['Mulai tanggal', 'Tanggal akhir'],
+    yearPlaceholder: 'Pilih tahun',
+    quarterPlaceholder: 'Pilih kuartal',
+    monthPlaceholder: 'Pilih bulan',
+    weekPlaceholder: 'Pilih minggu',
+    rangePlaceholder: ['Tanggal awal', 'Tanggal akhir'],
+    rangeYearPlaceholder: ['Tahun awal', 'Tahun akhir'],
+    rangeQuarterPlaceholder: ['Kuartal awal', 'Kuartal akhir'],
+    rangeMonthPlaceholder: ['Bulan awal', 'Bulan akhir'],
+    rangeWeekPlaceholder: ['Minggu awal', 'Minggu akhir'],
     ...CalendarLocale,
   },
   timePickerLocale: {

components/date-picker/style/token.ts

@@ -109,10 +109,14 @@ export type PickerPanelToken = {
   pickerControlIconBorderWidth: number;
 };
 
-export type PickerToken = FullToken<'DatePicker'> &
-  PickerPanelToken &
-  SharedInputToken &
-  SelectorToken;
+export interface PickerToken
+  extends FullToken<'DatePicker'>,
+    PickerPanelToken,
+    SharedInputToken,
+    SelectorToken {
+  /** @private Used for internal calculation */
+  INTERNAL_FIXED_ITEM_MARGIN: number;
+}
 
 export type SharedPickerToken = TokenWithCommonCls<GlobalToken> &
   PickerPanelToken &
@@ -139,10 +143,36 @@ export const initPickerPanelToken = (token: TokenWithCommonCls<GlobalToken>): Pi
 };
 
 export const initPanelComponentToken = (token: GlobalToken): PanelComponentToken => {
-  const { colorBgContainerDisabled, controlHeight, controlHeightSM, controlHeightLG, paddingXXS } =
-    token;
+  const {
+    colorBgContainerDisabled,
+    controlHeight,
+    controlHeightSM,
+    controlHeightLG,
+    paddingXXS,
+    lineWidth,
+  } = token;
 
-  return {
+  // Item height default use `controlHeight - 2 * paddingXXS`,
+  // but some case `paddingXXS=0`.
+  // Let's fallback it.
+  const dblPaddingXXS = paddingXXS * 2;
+  const dblLineWidth = lineWidth * 2;
+
+  const multipleItemHeight = Math.min(controlHeight - dblPaddingXXS, controlHeight - dblLineWidth);
+  const multipleItemHeightSM = Math.min(
+    controlHeightSM - dblPaddingXXS,
+    controlHeightSM - dblLineWidth,
+  );
+  const multipleItemHeightLG = Math.min(
+    controlHeightLG - dblPaddingXXS,
+    controlHeightLG - dblLineWidth,
+  );
+
+  // FIXED_ITEM_MARGIN is a hardcode calculation since calc not support rounding
+  const INTERNAL_FIXED_ITEM_MARGIN = Math.floor(paddingXXS / 2);
+
+  const filledToken = {
+    INTERNAL_FIXED_ITEM_MARGIN,
     cellHoverBg: token.controlItemBgHover,
     cellActiveWithRangeBg: token.controlItemBgActive,
     cellHoverWithRangeBg: new TinyColor(token.colorPrimary).lighten(35).toHexString(),
@@ -157,13 +187,15 @@ export const initPanelComponentToken = (token: GlobalToken): PanelComponentToken
     withoutTimeCellHeight: controlHeightLG * 1.65,
     multipleItemBg: token.colorFillSecondary,
     multipleItemBorderColor: 'transparent',
-    multipleItemHeight: controlHeight - paddingXXS * 2,
-    multipleItemHeightSM: controlHeightSM - paddingXXS * 2,
-    multipleItemHeightLG: controlHeightLG - paddingXXS * 2,
+    multipleItemHeight,
+    multipleItemHeightSM,
+    multipleItemHeightLG,
     multipleSelectorBgDisabled: colorBgContainerDisabled,
     multipleItemColorDisabled: token.colorTextDisabled,
     multipleItemBorderColorDisabled: 'transparent',
   };
+
+  return filledToken;
 };
 
 export const prepareComponentToken: GetDefaultToken<'DatePicker'> = (token) => ({

components/form/__tests__/index.test.tsx

@@ -1310,7 +1310,7 @@ describe('Form', () => {
             mark: 'pro_table_render',
             render: (_: any, doms: any) => (
               <div>
-                <h1>warning title</h1>
+                <div className="bamboo">warning title</div>
                 {doms.input}
                 {doms.errorList}
                 {doms.extra}
@@ -1323,7 +1323,7 @@ describe('Form', () => {
       </Form>,
     );
 
-    expect(container.querySelector('h1')!).toHaveTextContent(/warning title/i);
+    expect(container.querySelector('.bamboo')!).toHaveTextContent(/warning title/i);
   });
 
   it('Form Item element id will auto add form_item prefix if form name is empty and item name is in the black list', async () => {

components/input/style/index.ts

@@ -881,4 +881,7 @@ export default genStyleHooks(
     ];
   },
   initComponentToken,
+  {
+    resetFont: false,
+  },
 );

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

@@ -146780,7 +146780,7 @@ exports[`Locale Provider should display the text as id 1`] = `
         aria-invalid="false"
         autocomplete="off"
         date-range="start"
-        placeholder="Mulai tanggal"
+        placeholder="Tanggal awal"
         size="12"
         value=""
       />

components/locale/en_US.ts

@@ -59,6 +59,7 @@ const localeValues: Locale = {
     selectCurrent: 'Select current page',
     removeCurrent: 'Remove current page',
     selectAll: 'Select all data',
+    deselectAll: 'Deselect all data',
     removeAll: 'Remove all data',
     selectInvert: 'Invert current page',
   },

components/locale/zh_CN.ts

@@ -25,6 +25,7 @@ const localeValues: Locale = {
     filterEmptyText: '无筛选项',
     filterCheckall: '全选',
     filterSearchPlaceholder: '在筛选项中搜索',
+    emptyText: '暂无数据',
     selectAll: '全选当页',
     selectInvert: '反选当页',
     selectNone: '清空所有',
@@ -59,6 +60,7 @@ const localeValues: Locale = {
     selectCurrent: '全选当页',
     removeCurrent: '删除当页',
     selectAll: '全选所有',
+    deselectAll: '取消全选',
     removeAll: '删除全部',
     selectInvert: '反选当页',
   },

components/locale/zh_HK.ts

@@ -22,6 +22,9 @@ const localeValues: Locale = {
     filterConfirm: '確定',
     filterReset: '重置',
     filterEmptyText: '無篩選項',
+    filterCheckall: '全選',
+    filterSearchPlaceholder: '在篩選項中搜尋',
+    emptyText: '暫無數據',
     selectAll: '全部選取',
     selectInvert: '反向選取',
     selectNone: '清空所有',

components/locale/zh_TW.ts

@@ -22,6 +22,9 @@ const localeValues: Locale = {
     filterConfirm: '確定',
     filterReset: '重置',
     filterEmptyText: '無篩選項',
+    filterCheckall: '全選',
+    filterSearchPlaceholder: '在篩選項中搜尋',
+    emptyText: '暫無數據',
     selectAll: '全部選取',
     selectInvert: '反向選取',
     selectNone: '清空所有',

components/notification/__tests__/index.test.tsx

@@ -387,7 +387,7 @@ describe('notification', () => {
     expect(document.querySelectorAll('.with-false .ant-notification-notice-close').length).toBe(0);
   });
 
-  it('style.width could be overrided', async () => {
+  it('style.width could be override', async () => {
     act(() => {
       notification.open({
         message: 'Notification Title',
@@ -400,8 +400,5 @@ describe('notification', () => {
     });
     await awaitPromise();
     expect(document.querySelector('.with-style')).toHaveStyle({ width: '600px' });
-    expect(
-      document.querySelector('.ant-notification-notice-wrapper:has(.width-style)'),
-    ).toHaveStyle({ width: '' });
   });
 });

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

@@ -59,9 +59,11 @@ exports[`Segmented render label with ReactNode 1`] = `
       <div
         class="ant-segmented-item-label"
       >
-        <h2>
+        <div
+          class="little"
+        >
           Monthly
-        </h2>
+        </div>
       </div>
     </label>
   </div>

components/segmented/__tests__/index.test.tsx

@@ -61,7 +61,7 @@ describe('Segmented', () => {
         options={[
           { label: 'Daily', value: 'Daily' },
           { label: <div id="weekly">Weekly</div>, value: 'Weekly' },
-          { label: <h2>Monthly</h2>, value: 'Monthly' },
+          { label: <div className="little">Monthly</div>, value: 'Monthly' },
         ]}
       />,
     );
@@ -71,7 +71,7 @@ describe('Segmented', () => {
     expectMatchChecked(container, [true, false, false]);
 
     expect(container.querySelector('#weekly')?.textContent).toContain('Weekly');
-    expect(container.querySelectorAll('h2')[0].textContent).toContain('Monthly');
+    expect(container.querySelector('.little')?.textContent).toContain('Monthly');
   });
 
   it('render segmented with defaultValue', () => {

components/select/demo/component-token.tsx

@@ -11,10 +11,6 @@ for (let i = 10; i < 36; i++) {
   });
 }
 
-const handleChange = (value: string[]) => {
-  console.log(`selected ${value}`);
-};
-
 const App: React.FC = () => (
   <Space direction="vertical">
     <ConfigProvider
@@ -35,7 +31,6 @@ const App: React.FC = () => (
           style={{ width: '100%' }}
           placeholder="Please select"
           defaultValue={['a10', 'c12']}
-          onChange={handleChange}
           options={options}
         />
         <Select
@@ -44,7 +39,6 @@ const App: React.FC = () => (
           style={{ width: '100%' }}
           placeholder="Please select"
           defaultValue={['a10', 'c12']}
-          onChange={handleChange}
           options={options}
         />
       </Space>
@@ -64,7 +58,6 @@ const App: React.FC = () => (
           style={{ width: '100%' }}
           placeholder="Please select"
           defaultValue={['a10', 'c12']}
-          onChange={handleChange}
           options={options}
         />
         <Select
@@ -73,7 +66,26 @@ const App: React.FC = () => (
           style={{ width: '100%' }}
           placeholder="Please select"
           defaultValue={['a10', 'c12']}
-          onChange={handleChange}
+          options={options}
+        />
+      </Space>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Select: {
+            paddingXXS: 0,
+            controlHeight: 28,
+          },
+        },
+      }}
+    >
+      <Space style={{ width: '100%' }} direction="vertical">
+        <Select style={{ width: '100%' }} defaultValue="a10" options={options} />
+        <Select
+          mode="multiple"
+          style={{ width: '100%' }}
+          defaultValue={['a10', 'c12']}
           options={options}
         />
       </Space>