chore: auto merge branchs (#32585)

chore: sync feature into master

components/form/index.zh-CN.md

@@ -443,3 +443,4 @@ React 中异步更新会导致受控组件交互行为异常。当用户交互
 ### 有更多参考文档吗？
 
 - 你可以阅读[《antd v4 Form 使用心得》](https://zhuanlan.zhihu.com/p/375753910)获得一些使用帮助以及建议。
+- 想在 DatePicker、Switch 也使用 before、after？可以参考[《如何优雅的对 Form.Item 的 children 增加 before、after》](https://zhuanlan.zhihu.com/p/422752055)。

components/transfer/list.tsx

@@ -370,6 +370,7 @@ export default class TransferList<
           {/* Remove Current Page */}
           {pagination && (
             <Menu.Item
+              key="removeCurrent"
               onClick={() => {
                 const pageKeys = getEnabledItemKeys(
                   (this.defaultListBodyRef.current?.getItems() || []).map(entity => entity.item),
@@ -383,6 +384,7 @@ export default class TransferList<
 
           {/* Remove All */}
           <Menu.Item
+            key="removeAll"
             onClick={() => {
               onItemRemove?.(getEnabledItemKeys(filteredItems));
             }}
@@ -395,6 +397,7 @@ export default class TransferList<
       menu = (
         <Menu>
           <Menu.Item
+            key="selectAll"
             onClick={() => {
               const keys = getEnabledItemKeys(filteredItems);
               onItemSelectAll(keys, keys.length !== checkedKeys.length);
@@ -413,6 +416,7 @@ export default class TransferList<
             </Menu.Item>
           )}
           <Menu.Item
+            key="selectInvert"
             onClick={() => {
               let availableKeys: string[];
               if (pagination) {

components/tree/__tests__/image.test.ts

@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Tree image', () => {
-  imageDemoTest('tree', { skip: ['virtual-scroll.md'] });
+  imageDemoTest('tree', { skip: ['virtual-scroll.md', 'big-data.md'] });
 });

components/typography/util.tsx

@@ -25,14 +25,6 @@ const wrapperStyle: React.CSSProperties = {
   lineHeight: 'inherit',
 };
 
-function pxToNumber(value: string | null): number {
-  if (!value) {
-    return 0;
-  }
-  const match = value.match(/^\d*(\.\d*)?/);
-  return match ? Number(match[0]) : 0;
-}
-
 function styleToString(style: CSSStyleDeclaration) {
   // There are some different behavior between Firefox & Chrome.
   // We have to handle this ourself.
@@ -66,6 +58,10 @@ function resetDomStyles(target: HTMLElement, origin: HTMLElement) {
   target.style.height = 'auto';
   target.style.minHeight = 'auto';
   target.style.maxHeight = 'auto';
+  target.style.paddingTop = '0';
+  target.style.paddingBottom = '0';
+  target.style.borderTopWidth = '0';
+  target.style.borderBottomWidth = '0';
   target.style.top = '-999999px';
   target.style.zIndex = '-1000';
   // clean up css overflow
@@ -79,10 +75,11 @@ function getRealLineHeight(originElement: HTMLElement) {
   resetDomStyles(heightContainer, originElement);
   heightContainer.appendChild(document.createTextNode('text'));
   document.body.appendChild(heightContainer);
-  const { offsetHeight } = heightContainer;
-  const lineHeight = pxToNumber(window.getComputedStyle(originElement).lineHeight);
+  // The element real height is always less than multiple of line-height
+  // Use getBoundingClientRect to get actual single row height of the element
+  const realHeight = heightContainer.getBoundingClientRect().height;
   document.body.removeChild(heightContainer);
-  return offsetHeight > lineHeight ? offsetHeight : lineHeight;
+  return realHeight;
 }
 
 export default (
@@ -103,14 +100,8 @@ export default (
   }
 
   const { rows, suffix = '' } = option;
-  // Get origin style
-  const originStyle = window.getComputedStyle(originElement);
   const lineHeight = getRealLineHeight(originElement);
-  const overflowRows = rows + 1;
-  const oneRowMaxHeight =
-    Math.floor(lineHeight) +
-    pxToNumber(originStyle.paddingTop) +
-    pxToNumber(originStyle.paddingBottom);
+  const maxHeight = Math.round(lineHeight * rows * 100 ) / 100;
 
   resetDomStyles(ellipsisContainer, originElement);
 
@@ -129,9 +120,9 @@ export default (
 
   // Check if ellipsis in measure div is height enough for content
   function inRange() {
-    return (
-      Math.ceil(ellipsisContainer.getBoundingClientRect().height / overflowRows) < oneRowMaxHeight
-    );
+    const currentHeight =
+      Math.round(ellipsisContainer.getBoundingClientRect().height * 100) / 100
+    return currentHeight - .1 <= maxHeight; // -.1 for firefox
   }
 
   // Skip ellipsis if already match

package.json

@@ -214,7 +214,7 @@
     "fs-extra": "^10.0.0",
     "full-icu": "^1.3.0",
     "glob": "^7.1.4",
-    "http-server": "^13.0.0",
+    "http-server": "^14.0.0",
     "husky": "^7.0.1",
     "identity-obj-proxy": "^3.0.0",
     "ignore-emit-webpack-plugin": "^2.0.6",