fix: picker multiple selection lines collpase (#47821)

* fix: DatePicker multiple padding

* docs: update demo

* chore: clean up

components/date-picker/demo/multiple-debug.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+非响应式间距测试。
+
+## en-US
+
+Non-responsive spacing test.

components/date-picker/demo/multiple-debug.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DatePicker, Flex } from 'antd';
+import dayjs from 'dayjs';
+
+const defaultValue = new Array(10).fill(0).map((_, index) => dayjs('2000-01-01').add(index, 'day'));
+
+const App: React.FC = () => (
+  <Flex vertical gap="small">
+    <DatePicker multiple defaultValue={defaultValue} size="small" />
+    <DatePicker multiple defaultValue={defaultValue} />
+    <DatePicker multiple defaultValue={defaultValue} size="large" />
+  </Flex>
+);
+
+export default App;

components/date-picker/index.en-US.md

@@ -19,6 +19,7 @@ By clicking the input box, you can select a date from a popup calendar.
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/range-picker.tsx">Range Picker</code>
 <code src="./demo/multiple.tsx" version="5.14.0">Multiple</code>
+<code src="./demo/multiple-debug.tsx" debug>Multiple Debug</code>
 <code src="./demo/needConfirm.tsx" version="5.14.0">Need Confirm</code>
 <code src="./demo/switchable.tsx">Switchable picker</code>
 <code src="./demo/format.tsx">Date Format</code>

components/date-picker/index.zh-CN.md

@@ -20,6 +20,7 @@ demo:
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/range-picker.tsx">范围选择器</code>
 <code src="./demo/multiple.tsx" version="5.14.0">多选</code>
+<code src="./demo/multiple-debug.tsx" debug>多选 Debug</code>
 <code src="./demo/needConfirm.tsx" version="5.14.0">选择确认</code>
 <code src="./demo/switchable.tsx">切换不同的选择器</code>
 <code src="./demo/format.tsx">日期格式</code>

components/date-picker/style/multiple.ts

@@ -1,19 +1,26 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 
-import { genSelectionStyle } from '../../select/style/multiple';
+import { FIXED_ITEM_MARGIN, genSelectionStyle } from '../../select/style/multiple';
 import { mergeToken, type GenerateStyle } from '../../theme/internal';
 import type { PickerToken } from './token';
 
 const genSize = (token: PickerToken, suffix?: string): CSSInterpolation => {
-  const { componentCls, selectHeight, fontHeight, lineWidth, calc } = token;
+  const { componentCls, selectHeight, fontHeight, lineWidth, controlHeight, calc } = token;
 
   const suffixCls = suffix ? `${componentCls}-${suffix}` : '';
 
   const height = token.calc(fontHeight).add(2).equal();
   const restHeight = () => calc(selectHeight).sub(height).sub(calc(lineWidth).mul(2));
 
-  const paddingTop = token.max(restHeight().div(2).equal(), 0);
-  const paddingBottom = token.max(restHeight().sub(paddingTop).equal(), 0);
+  const paddingBase = token.max(restHeight().div(2).equal(), 0);
+  const paddingTop = token.max(token.calc(paddingBase).sub(FIXED_ITEM_MARGIN).equal(), 0);
+  const paddingBottom = token.max(
+    restHeight()
+      .sub(paddingTop)
+      .sub(FIXED_ITEM_MARGIN * 2)
+      .equal(),
+    0,
+  );
 
   return [
     genSelectionStyle(token, suffix),
@@ -21,7 +28,8 @@ const genSize = (token: PickerToken, suffix?: string): CSSInterpolation => {
       [`${componentCls}-multiple${suffixCls}`]: {
         paddingTop,
         paddingBottom,
-        paddingInlineStart: paddingTop,
+        paddingInlineStart: paddingBase,
+        minHeight: controlHeight,
       },
     },
   ];
@@ -36,6 +44,7 @@ const genPickerMultipleStyle: GenerateStyle<PickerToken> = (token) => {
     multipleSelectItemHeight: token.controlHeightXS,
     borderRadius: token.borderRadiusSM,
     borderRadiusSM: token.borderRadiusXS,
+    controlHeight: token.controlHeightSM,
   });
 
   const largeToken = mergeToken<PickerToken>(token, {
@@ -47,6 +56,7 @@ const genPickerMultipleStyle: GenerateStyle<PickerToken> = (token) => {
     multipleSelectItemHeight: token.multipleItemHeightLG,
     borderRadius: token.borderRadiusLG,
     borderRadiusSM: token.borderRadius,
+    controlHeight: token.controlHeightLG,
   });
 
   return [
@@ -71,11 +81,6 @@ const genPickerMultipleStyle: GenerateStyle<PickerToken> = (token) => {
           },
         },
 
-        // ==================== Selection ====================
-        [`${componentCls}-selection-item`]: {
-          marginBlock: 0,
-        },
-
         // ====================== Input ======================
         // Input is `readonly`, which is used for a11y only
         [`${componentCls}-multiple-input`]: {

components/select/style/multiple.ts

@@ -6,7 +6,7 @@ import { mergeToken, type AliasToken } from '../../theme/internal';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
 import type { SelectToken } from './token';
 
-const FIXED_ITEM_MARGIN = 2;
+export const FIXED_ITEM_MARGIN = 2;
 
 type SelectItemToken = Pick<
   SelectToken,