🔀 merge master into feature

components/_util/getRenderPropValue.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export type RenderFunction = () => React.ReactNode;
+
+export const getRenderPropValue = (
+  propValue?: React.ReactNode | RenderFunction,
+): React.ReactNode => {
+  if (!propValue) {
+    return null;
+  }
+
+  const isRenderFunction = typeof propValue === 'function';
+  if (isRenderFunction) {
+    return (propValue as RenderFunction)();
+  }
+
+  return propValue;
+};

components/breadcrumb/BreadcrumbItem.tsx

@@ -10,6 +10,7 @@ export interface BreadcrumbItemProps {
   separator?: React.ReactNode;
   href?: string;
   overlay?: DropDownProps['overlay'];
+  dropdownProps?: DropDownProps;
   onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
 }
 
@@ -58,10 +59,10 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
    * Wrap a DropDown
    */
   renderBreadcrumbNode = (breadcrumbItem: React.ReactNode, prefixCls: string) => {
-    const { overlay } = this.props;
+    const { overlay, dropdownProps } = this.props;
     if (overlay) {
       return (
-        <DropDown overlay={overlay} placement="bottomCenter">
+        <DropDown overlay={overlay} placement="bottomCenter" {...dropdownProps}>
           <span className={`${prefixCls}-overlay-link`}>
             {breadcrumbItem}
             <DownOutlined />

components/breadcrumb/index.en-US.md

@@ -30,6 +30,7 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 | href | Target of hyperlink | string | - |  |
 | overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - |  |
 | onClick | Set the handler to handle `click` event | (e:MouseEvent)=>void | - |  |
+| dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - |  |
 
 ### Breadcrumb.Separator
 

components/breadcrumb/index.zh-CN.md

@@ -27,10 +27,11 @@ title: Breadcrumb
 ### Breadcrumb.Item
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| ------- | -------------- | -------------------------------------- | ------ | ---- |
+| --- | --- | --- | --- | --- |
 | href | 链接的目的地 | string | - |  |
 | overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - |  |
 | onClick | 单击事件 | (e:MouseEvent)=>void | - |  |
+| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - |  |
 
 ### Breadcrumb.Separator
 

components/calendar/__tests__/__snapshots__/demo.test.js.snap

@@ -204,9 +204,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
             </tr>
           </thead>
           <tbody>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell"
                 title="2016-10-30"
@@ -327,9 +325,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2016-11-06"
@@ -450,9 +446,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2016-11-13"
@@ -573,9 +567,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2016-11-20"
@@ -696,9 +688,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2016-11-27"
@@ -819,9 +809,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell"
                 title="2016-12-04"
@@ -1157,9 +1145,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
               </tr>
             </thead>
             <tbody>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell"
                   title="2016-10-30"
@@ -1280,9 +1266,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2016-11-06"
@@ -1403,9 +1387,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2016-11-13"
@@ -1526,9 +1508,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2016-11-20"
@@ -1649,9 +1629,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2016-11-27"
@@ -1772,9 +1750,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell"
                   title="2016-12-04"
@@ -2136,9 +2112,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
               </tr>
             </thead>
             <tbody>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell"
                   title="2016-10-30"
@@ -2259,9 +2233,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2016-11-06"
@@ -2382,9 +2354,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2016-11-13"
@@ -2505,9 +2475,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2016-11-20"
@@ -2628,9 +2596,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2016-11-27"
@@ -2751,9 +2717,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell"
                   title="2016-12-04"
@@ -3087,9 +3051,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
             </tr>
           </thead>
           <tbody>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell"
                 title="2016-10-30"
@@ -3238,9 +3200,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2016-11-06"
@@ -3461,9 +3421,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2016-11-13"
@@ -3697,9 +3655,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2016-11-20"
@@ -3848,9 +3804,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2016-11-27"
@@ -3999,9 +3953,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell"
                 title="2016-12-04"
@@ -4448,9 +4400,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
               </tr>
             </thead>
             <tbody>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2017-01-01"
@@ -4571,9 +4521,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2017-01-08"
@@ -4694,9 +4642,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2017-01-15"
@@ -4817,9 +4763,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2017-01-22"
@@ -4940,9 +4884,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2017-01-29"
@@ -5063,9 +5005,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell"
                   title="2017-02-05"

components/calendar/__tests__/__snapshots__/index.test.js.snap

@@ -206,9 +206,7 @@ exports[`Calendar Calendar should support locale 1`] = `
             </tr>
           </thead>
           <tbody>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2018-10-01"
@@ -329,9 +327,7 @@ exports[`Calendar Calendar should support locale 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2018-10-08"
@@ -452,9 +448,7 @@ exports[`Calendar Calendar should support locale 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2018-10-15"
@@ -575,9 +569,7 @@ exports[`Calendar Calendar should support locale 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2018-10-22"
@@ -698,9 +690,7 @@ exports[`Calendar Calendar should support locale 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2018-10-29"
@@ -821,9 +811,7 @@ exports[`Calendar Calendar should support locale 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell"
                 title="2018-11-05"
@@ -1156,9 +1144,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
             </tr>
           </thead>
           <tbody>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell"
                 title="2000-08-27"
@@ -1279,9 +1265,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2000-09-03"
@@ -1402,9 +1386,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2000-09-10"
@@ -1525,9 +1507,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2000-09-17"
@@ -1648,9 +1628,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2000-09-24"
@@ -1771,9 +1749,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell"
                 title="2000-10-01"

components/carousel/__tests__/index.test.js

@@ -126,4 +126,18 @@ describe('Carousel', () => {
       ).toBeTruthy();
     });
   });
+
+  describe('dots precise control by plain object', () => {
+    it('use dots to provide dotsClasse', () => {
+      const wrapper = mount(
+        <Carousel dots={{ className: 'customDots' }}>
+          <div>1</div>
+          <div>2</div>
+          <div>3</div>
+        </Carousel>,
+      );
+      wrapper.update();
+      expect(wrapper.find('.slick-dots').hasClass('customDots')).toBeTruthy();
+    });
+  });
 });

components/carousel/index.en-US.md

@@ -20,7 +20,7 @@ A carousel component. Scales with its container.
 | autoplay | Whether to scroll automatically | boolean | `false` |  |
 | beforeChange | Callback function called before the current index changes | function(from, to) | - |  |
 | dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | bottom |  |
-| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` |  |
+| dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others | boolean \| { className?:string } | `true` |  |
 | easing | Transition interpolation function name | string | `linear` |  |
 | effect | Transition effect | `scrollx` \| `fade` | `scrollx` |  |
 

components/carousel/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import isPlainObject from 'lodash/isPlainObject';
 import debounce from 'lodash/debounce';
 import { Settings } from '@ant-design/react-slick';
 import classNames from 'classnames';
@@ -14,13 +15,18 @@ export type CarouselEffect = 'scrollx' | 'fade';
 export type DotPosition = 'top' | 'bottom' | 'left' | 'right';
 
 // Carousel
-export interface CarouselProps extends Settings {
+export interface CarouselProps extends Omit<Settings, 'dots' | 'dotsClass'> {
   effect?: CarouselEffect;
   style?: React.CSSProperties;
   prefixCls?: string;
   slickGoTo?: number;
   dotPosition?: DotPosition;
   children?: React.ReactNode;
+  dots?:
+    | boolean
+    | {
+        className?: string;
+      };
 }
 
 export default class Carousel extends React.Component<CarouselProps, {}> {
@@ -106,7 +112,13 @@ export default class Carousel extends React.Component<CarouselProps, {}> {
     const dotsClass = 'slick-dots';
     const dotPosition = this.getDotPosition();
     props.vertical = dotPosition === 'left' || dotPosition === 'right';
-    props.dotsClass = `${dotsClass} ${dotsClass}-${dotPosition || 'bottom'}`;
+
+    const enableDots = props.dots === true || isPlainObject(props.dots);
+    const dsClass = classNames(
+      dotsClass,
+      `${dotsClass}-${dotPosition || 'bottom'}`,
+      typeof props.dots === 'boolean' ? false : props.dots?.className,
+    );
 
     const className = classNames(prefixCls, {
       [`${prefixCls}-rtl`]: direction === 'rtl',
@@ -115,7 +127,7 @@ export default class Carousel extends React.Component<CarouselProps, {}> {
 
     return (
       <div className={className}>
-        <SlickCarousel ref={this.saveSlick} {...props} />
+        <SlickCarousel ref={this.saveSlick} {...props} dots={enableDots} dotsClass={dsClass} />
       </div>
     );
   };

components/carousel/index.zh-CN.md

@@ -21,7 +21,7 @@ subtitle: 走马灯
 | autoplay | 是否自动切换 | boolean | false |  |  |
 | beforeChange | 切换面板的回调 | function(from, to) | 无 |  |  |
 | dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | bottom |  |
-| dots | 是否显示面板指示点 | boolean | true |  |  |
+| dots | 是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?:string } | true |  |  |
 | easing | 动画效果 | string | linear |  |  |
 | effect | 动画效果函数，可取 scrollx, fade | string | scrollx |  |  |
 

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -1255,9 +1255,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
               </tr>
             </thead>
             <tbody>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="config-picker-cell"
                   title="2000-08-27"
@@ -1378,9 +1376,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="config-picker-cell config-picker-cell-in-view config-picker-cell-selected"
                   title="2000-09-03"
@@ -1501,9 +1497,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="config-picker-cell config-picker-cell-in-view"
                   title="2000-09-10"
@@ -1624,9 +1618,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="config-picker-cell config-picker-cell-in-view"
                   title="2000-09-17"
@@ -1747,9 +1739,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="config-picker-cell config-picker-cell-in-view"
                   title="2000-09-24"
@@ -1870,9 +1860,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="config-picker-cell"
                   title="2000-10-01"
@@ -2262,7 +2250,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
                   </div>
                 </td>
                 <td
-                  class="config-picker-cell config-picker-cell-selected config-picker-cell-in-view"
+                  class="config-picker-cell config-picker-cell-in-view config-picker-cell-selected"
                   title="2000-09"
                 >
                   <div
@@ -2546,9 +2534,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
               </tr>
             </thead>
             <tbody>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell"
                   title="2000-08-27"
@@ -2669,9 +2655,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-selected"
                   title="2000-09-03"
@@ -2792,9 +2776,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2000-09-10"
@@ -2915,9 +2897,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2000-09-17"
@@ -3038,9 +3018,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2000-09-24"
@@ -3161,9 +3139,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell"
                   title="2000-10-01"
@@ -3553,7 +3529,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
                   </div>
                 </td>
                 <td
-                  class="ant-picker-cell ant-picker-cell-selected ant-picker-cell-in-view"
+                  class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-selected"
                   title="2000-09"
                 >
                   <div
@@ -3837,9 +3813,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
               </tr>
             </thead>
             <tbody>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="prefix-Calendar-cell"
                   title="2000-08-27"
@@ -3960,9 +3934,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="prefix-Calendar-cell prefix-Calendar-cell-in-view prefix-Calendar-cell-selected"
                   title="2000-09-03"
@@ -4083,9 +4055,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="prefix-Calendar-cell prefix-Calendar-cell-in-view"
                   title="2000-09-10"
@@ -4206,9 +4176,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="prefix-Calendar-cell prefix-Calendar-cell-in-view"
                   title="2000-09-17"
@@ -4329,9 +4297,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="prefix-Calendar-cell prefix-Calendar-cell-in-view"
                   title="2000-09-24"
@@ -4452,9 +4418,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="prefix-Calendar-cell"
                   title="2000-10-01"
@@ -4844,7 +4808,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
                   </div>
                 </td>
                 <td
-                  class="prefix-Calendar-cell prefix-Calendar-cell-selected prefix-Calendar-cell-in-view"
+                  class="prefix-Calendar-cell prefix-Calendar-cell-in-view prefix-Calendar-cell-selected"
                   title="2000-09"
                 >
                   <div
@@ -9271,7 +9235,6 @@ exports[`ConfigProvider components Popconfirm configProvider 1`] = `
           class="config-popover-inner"
           role="tooltip"
         >
-          <div>
           <div
             class="config-popover-inner-content"
           >
@@ -9328,7 +9291,6 @@ exports[`ConfigProvider components Popconfirm configProvider 1`] = `
     </div>
   </div>
 </div>
-</div>
 `;
 
 exports[`ConfigProvider components Popconfirm normal 1`] = `
@@ -9353,7 +9315,6 @@ exports[`ConfigProvider components Popconfirm normal 1`] = `
           class="ant-popover-inner"
           role="tooltip"
         >
-          <div>
           <div
             class="ant-popover-inner-content"
           >
@@ -9410,7 +9371,6 @@ exports[`ConfigProvider components Popconfirm normal 1`] = `
     </div>
   </div>
 </div>
-</div>
 `;
 
 exports[`ConfigProvider components Popconfirm prefixCls 1`] = `
@@ -9435,7 +9395,6 @@ exports[`ConfigProvider components Popconfirm prefixCls 1`] = `
           class="prefix-Popconfirm-inner"
           role="tooltip"
         >
-          <div>
           <div
             class="prefix-Popconfirm-inner-content"
           >
@@ -9492,7 +9451,6 @@ exports[`ConfigProvider components Popconfirm prefixCls 1`] = `
     </div>
   </div>
 </div>
-</div>
 `;
 
 exports[`ConfigProvider components Popover configProvider 1`] = `
@@ -9517,7 +9475,6 @@ exports[`ConfigProvider components Popover configProvider 1`] = `
           class="config-popover-inner"
           role="tooltip"
         >
-          <div>
           <div
             class="config-popover-inner-content"
           />
@@ -9526,7 +9483,6 @@ exports[`ConfigProvider components Popover configProvider 1`] = `
     </div>
   </div>
 </div>
-</div>
 `;
 
 exports[`ConfigProvider components Popover normal 1`] = `
@@ -9551,7 +9507,6 @@ exports[`ConfigProvider components Popover normal 1`] = `
           class="ant-popover-inner"
           role="tooltip"
         >
-          <div>
           <div
             class="ant-popover-inner-content"
           />
@@ -9560,7 +9515,6 @@ exports[`ConfigProvider components Popover normal 1`] = `
     </div>
   </div>
 </div>
-</div>
 `;
 
 exports[`ConfigProvider components Popover prefixCls 1`] = `
@@ -9585,7 +9539,6 @@ exports[`ConfigProvider components Popover prefixCls 1`] = `
           class="prefix-Popover-inner"
           role="tooltip"
         >
-          <div>
           <div
             class="prefix-Popover-inner-content"
           />
@@ -9594,7 +9547,6 @@ exports[`ConfigProvider components Popover prefixCls 1`] = `
     </div>
   </div>
 </div>
-</div>
 `;
 
 exports[`ConfigProvider components Progress configProvider 1`] = `
@@ -11811,16 +11763,23 @@ exports[`ConfigProvider components Table configProvider 1`] = `
                               <div
                                 class="config-table-filter-dropdown-btns"
                               >
-                                <a
+                                <button
-                                  class="config-table-filter-dropdown-link confirm"
+                                  class="config-btn config-btn-link config-btn-sm"
-                                >
+                                  disabled=""
-                                  OK
+                                  type="button"
-                                </a>
-                                <a
-                                  class="config-table-filter-dropdown-link clear"
                                 >
+                                  <span>
                                     Reset
-                                </a>
+                                  </span>
+                                </button>
+                                <button
+                                  class="config-btn config-btn-primary config-btn-sm"
+                                  type="button"
+                                >
+                                  <span>
+                                    OK
+                                  </span>
+                                </button>
                               </div>
                             </div>
                           </div>
@@ -12150,16 +12109,23 @@ exports[`ConfigProvider components Table normal 1`] = `
                               <div
                                 class="ant-table-filter-dropdown-btns"
                               >
-                                <a
+                                <button
-                                  class="ant-table-filter-dropdown-link confirm"
+                                  class="ant-btn ant-btn-link ant-btn-sm"
-                                >
+                                  disabled=""
-                                  OK
+                                  type="button"
-                                </a>
-                                <a
-                                  class="ant-table-filter-dropdown-link clear"
                                 >
+                                  <span>
                                     Reset
-                                </a>
+                                  </span>
+                                </button>
+                                <button
+                                  class="ant-btn ant-btn-primary ant-btn-sm"
+                                  type="button"
+                                >
+                                  <span>
+                                    OK
+                                  </span>
+                                </button>
                               </div>
                             </div>
                           </div>
@@ -12489,16 +12455,23 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
                               <div
                                 class="prefix-Table-filter-dropdown-btns"
                               >
-                                <a
+                                <button
-                                  class="prefix-Table-filter-dropdown-link confirm"
+                                  class="ant-btn ant-btn-link ant-btn-sm"
-                                >
+                                  disabled=""
-                                  OK
+                                  type="button"
-                                </a>
-                                <a
-                                  class="prefix-Table-filter-dropdown-link clear"
                                 >
+                                  <span>
                                     Reset
-                                </a>
+                                  </span>
+                                </button>
+                                <button
+                                  class="ant-btn ant-btn-primary ant-btn-sm"
+                                  type="button"
+                                >
+                                  <span>
+                                    OK
+                                  </span>
+                                </button>
                               </div>
                             </div>
                           </div>

components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap

@@ -146,9 +146,7 @@ Array [
                   </tr>
                 </thead>
                 <tbody>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-disabled"
                       title="2016-10-30"
@@ -220,9 +218,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-disabled ant-picker-cell-in-view"
                       title="2016-11-06"
@@ -294,9 +290,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-disabled ant-picker-cell-in-view"
                       title="2016-11-13"
@@ -368,9 +362,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-disabled ant-picker-cell-in-view"
                       title="2016-11-20"
@@ -442,9 +434,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-in-view"
                       title="2016-11-27"
@@ -516,9 +506,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell"
                       title="2016-12-04"
@@ -780,9 +768,7 @@ Array [
                   </tr>
                 </thead>
                 <tbody>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell"
                       title="1999-12-27"
@@ -854,9 +840,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-in-view"
                       title="2000-01-03"
@@ -928,9 +912,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-in-view"
                       title="2000-01-10"
@@ -1002,9 +984,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-in-view"
                       title="2000-01-17"
@@ -1076,9 +1056,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-in-view"
                       title="2000-01-24"
@@ -1150,9 +1128,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-in-view"
                       title="2000-01-31"

components/date-picker/__tests__/__snapshots__/other.test.js.snap

@@ -53,7 +53,7 @@ exports[`MonthPicker and WeekPicker render MonthPicker 1`] = `
               <tbody>
                 <tr>
                   <td
-                    class="ant-picker-cell ant-picker-cell-selected ant-picker-cell-in-view"
+                    class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-selected"
                     title="2000-01"
                   >
                     <div

components/dropdown/style/index.less

@@ -94,7 +94,7 @@
       ul {
         margin-right: 0.3em;
         margin-left: 0.3em;
-        padding: 0;
+        padding: @dropdown-edge-child-vertical-padding 0;
       }
     }
 

components/form/FormItem.tsx

@@ -77,6 +77,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
     validateStatus,
     children,
     required,
+    label,
     trigger = 'onChange',
     validateTrigger = 'onChange',
     ...restProps
@@ -235,9 +236,15 @@ function FormItem(props: FormItemProps): React.ReactElement {
     return renderLayout(children);
   }
 
+  const variables: Record<string, string> = {};
+  if (typeof label === 'string') {
+    variables.label = label;
+  }
+
   return (
     <Field
       {...props}
+      messageVariables={variables}
       trigger={trigger}
       validateTrigger={validateTrigger}
       onReset={() => {

components/form/__tests__/index.test.js

@@ -596,6 +596,28 @@ describe('Form', () => {
     expect(errorSpy).not.toHaveBeenCalled();
   });
 
+  it('`label` support template', async () => {
+    const wrapper = mount(
+      // eslint-disable-next-line no-template-curly-in-string
+      <Form validateMessages={{ required: '${label} is good!' }}>
+        <Form.Item name="test" label="Bamboo" rules={[{ required: true }]}>
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    wrapper.find('form').simulate('submit');
+    await delay(50);
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('.ant-form-item-explain')
+        .first()
+        .text(),
+    ).toEqual('Bamboo is good!');
+  });
+
   it('return same form instance', () => {
     const instances = new Set();
 

components/form/demo/nest-messages.md

@@ -22,13 +22,13 @@ const layout = {
 };
 
 const validateMessages = {
-  required: 'This field is required!',
+  required: '${label} is required!',
   types: {
-    email: 'Not a validate email!',
+    email: '${label} is not validate email!',
-    number: 'Not a validate number!',
+    number: '${label} is not a validate number!',
   },
   number: {
-    range: 'Must be between ${min} and ${max}',
+    range: '${label} must be between ${min} and ${max}',
   },
 };
 

components/list/__tests__/__snapshots__/pagination.test.js.snap

@@ -372,7 +372,7 @@ exports[`List.pagination should change page size work 2`] = `
       <div>
         <div
           class="ant-select-dropdown"
-          style="width: 0px; opacity: 0;"
+          style="min-width: 0; opacity: 0;"
         >
           <div>
             <div

components/locale-provider/index.tsx

@@ -1,22 +1,34 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { ModalLocale, changeConfirmLocale } from '../modal/locale';
 import warning from '../_util/warning';
 
+import { ModalLocale, changeConfirmLocale } from '../modal/locale';
+import { TransferLocale as TransferLocaleForEmpty } from '../empty';
+import { PaginationLocale } from '../pagination/Pagination';
+import { TableLocale } from '../table/interface';
+import { PopconfirmLocale } from '../popconfirm';
+import { UploadLocale } from '../upload/interface';
+import { TransferLocale } from '../transfer';
+
 export const ANT_MARK = 'internalMark';
 
 export interface Locale {
   locale: string;
-  Pagination?: Object;
+  Pagination?: PaginationLocale;
   DatePicker?: Object;
   TimePicker?: Object;
   Calendar?: Object;
-  Table?: Object;
+  Table?: TableLocale;
   Modal?: ModalLocale;
-  Popconfirm?: Object;
+  Popconfirm?: PopconfirmLocale;
-  Transfer?: Object;
+  Transfer?: Partial<TransferLocale>;
   Select?: Object;
-  Upload?: Object;
+  Upload?: UploadLocale;
+  Empty?: TransferLocaleForEmpty;
+  global?: Object;
+  PageHeader?: Object;
+  Icon?: Object;
+  Text?: Object;
 }
 
 export interface LocaleProviderProps {

components/locale/ar_EG.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/ar_EG';
 import DatePicker from '../date-picker/locale/ar_EG';
 import TimePicker from '../time-picker/locale/ar_EG';
 import Calendar from '../calendar/locale/ar_EG';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'ar',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'لا توجد بيانات',
   },
 };
+
+export default localeValues;

components/locale/az_AZ.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/az_AZ';
 import DatePicker from '../date-picker/locale/az_AZ';
 import TimePicker from '../time-picker/locale/az_AZ';
 import Calendar from '../calendar/locale/az_AZ';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'az',
   Pagination,
   DatePicker,
@@ -43,3 +44,5 @@ export default {
     previewFile: 'Fayla önbaxış',
   },
 };
+
+export default localeValues;

components/locale/bg_BG.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/bg_BG';
 import DatePicker from '../date-picker/locale/bg_BG';
 import TimePicker from '../time-picker/locale/bg_BG';
 import Calendar from '../calendar/locale/bg_BG';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'bg',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Няма данни',
   },
 };
+
+export default localeValues;

components/locale/ca_ES.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/ca_ES';
 import DatePicker from '../date-picker/locale/ca_ES';
 import TimePicker from '../time-picker/locale/ca_ES';
 import Calendar from '../calendar/locale/ca_ES';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'ca',
   Pagination,
   DatePicker,
@@ -39,3 +40,5 @@ export default {
     description: 'Sense dades',
   },
 };
+
+export default localeValues;

components/locale/cs_CZ.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/cs_CZ';
 import DatePicker from '../date-picker/locale/cs_CZ';
 import TimePicker from '../time-picker/locale/cs_CZ';
 import Calendar from '../calendar/locale/cs_CZ';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'cs',
   Pagination,
   DatePicker,
@@ -39,3 +40,5 @@ export default {
     description: 'Žádná data',
   },
 };
+
+export default localeValues;

components/locale/da_DK.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/da_DK';
 import DatePicker from '../date-picker/locale/da_DK';
 import TimePicker from '../time-picker/locale/da_DK';
 import Calendar from '../calendar/locale/da_DK';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'da',
   DatePicker,
   TimePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Ingen data',
   },
 };
+
+export default localeValues;

components/locale/de_DE.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/de_DE';
 import DatePicker from '../date-picker/locale/de_DE';
 import TimePicker from '../time-picker/locale/de_DE';
 import Calendar from '../calendar/locale/de_DE';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'de',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Keine Daten',
   },
 };
+
+export default localeValues;

components/locale/default.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/en_US';
 import DatePicker from '../date-picker/locale/en_US';
 import TimePicker from '../time-picker/locale/en_US';
 import Calendar from '../calendar/locale/en_US';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'en',
   Pagination,
   DatePicker,
@@ -22,6 +23,9 @@ export default {
     sortTitle: 'Sort',
     expand: 'Expand row',
     collapse: 'Collapse row',
+    triggerDesc: 'Click sort by descend',
+    triggerAsc: 'Click sort by ascend',
+    cancelSort: 'Click to cancel sort',
   },
   Modal: {
     okText: 'OK',
@@ -61,3 +65,5 @@ export default {
     back: 'Back',
   },
 };
+
+export default localeValues;

components/locale/el_GR.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/el_GR';
 import DatePicker from '../date-picker/locale/el_GR';
 import TimePicker from '../time-picker/locale/el_GR';
 import Calendar from '../calendar/locale/el_GR';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'el',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Δεν υπάρχουν δεδομένα',
   },
 };
+
+export default localeValues;

components/locale/en_GB.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/en_GB';
 import DatePicker from '../date-picker/locale/en_GB';
 import TimePicker from '../time-picker/locale/en_GB';
 import Calendar from '../calendar/locale/en_GB';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'en-gb',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'No data',
   },
 };
+
+export default localeValues;

components/locale/es_ES.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/es_ES';
 import DatePicker from '../date-picker/locale/es_ES';
 import TimePicker from '../time-picker/locale/es_ES';
 import Calendar from '../calendar/locale/es_ES';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'es',
   Pagination,
   DatePicker,
@@ -57,3 +58,5 @@ export default {
     back: 'volver',
   },
 };
+
+export default localeValues;

components/locale/et_EE.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/et_EE';
 import DatePicker from '../date-picker/locale/et_EE';
 import TimePicker from '../time-picker/locale/et_EE';
 import Calendar from '../calendar/locale/et_EE';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'et',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Andmed puuduvad',
   },
 };
+
+export default localeValues;

components/locale/fa_IR.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/fa_IR';
 import DatePicker from '../date-picker/locale/fa_IR';
 import TimePicker from '../time-picker/locale/fa_IR';
 import Calendar from '../calendar/locale/fa_IR';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'fa',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'داده‌ای موجود نیست',
   },
 };
+
+export default localeValues;

components/locale/fi_FI.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/fi_FI';
 import DatePicker from '../date-picker/locale/fi_FI';
 import TimePicker from '../time-picker/locale/fi_FI';
 import Calendar from '../calendar/locale/fi_FI';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'fi',
   Pagination,
   DatePicker,
@@ -42,3 +43,5 @@ export default {
     description: 'Ei kohteita',
   },
 };
+
+export default localeValues;

components/locale/fr_BE.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/fr_BE';
 import DatePicker from '../date-picker/locale/fr_BE';
 import TimePicker from '../time-picker/locale/fr_BE';
 import Calendar from '../calendar/locale/fr_BE';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'fr',
   Pagination,
   DatePicker,
@@ -45,3 +46,5 @@ export default {
     expand: 'développer',
   },
 };
+
+export default localeValues;

components/locale/fr_FR.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/fr_FR';
 import DatePicker from '../date-picker/locale/fr_FR';
 import TimePicker from '../time-picker/locale/fr_FR';
 import Calendar from '../calendar/locale/fr_FR';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'fr',
   Pagination,
   DatePicker,
@@ -45,3 +46,5 @@ export default {
     expand: 'développer',
   },
 };
+
+export default localeValues;

components/locale/he_IL.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/he_IL';
 import DatePicker from '../date-picker/locale/he_IL';
 import TimePicker from '../time-picker/locale/he_IL';
 import Calendar from '../calendar/locale/he_IL';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'he',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'אין מידע',
   },
 };
+
+export default localeValues;

components/locale/hi_IN.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/hi_IN';
 import DatePicker from '../date-picker/locale/hi_IN';
 import TimePicker from '../time-picker/locale/hi_IN';
 import Calendar from '../calendar/locale/hi_IN';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'hi',
   Pagination,
   DatePicker,
@@ -49,3 +50,5 @@ export default {
     downloadFile: 'फ़ाइल डाउनलोड करें',
   },
 };
+
+export default localeValues;

components/locale/hr_HR.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/hr_HR';
 import DatePicker from '../date-picker/locale/hr_HR';
 import TimePicker from '../time-picker/locale/hr_HR';
 import Calendar from '../calendar/locale/hr_HR';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'hr',
   Pagination,
   DatePicker,
@@ -55,3 +56,5 @@ export default {
     expand: 'proširi',
   },
 };
+
+export default localeValues;

components/locale/hu_HU.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/hu_HU';
 import DatePicker from '../date-picker/locale/hu_HU';
 import TimePicker from '../time-picker/locale/hu_HU';
 import Calendar from '../calendar/locale/hu_HU';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'hu',
   Pagination,
   DatePicker,
@@ -42,3 +43,5 @@ export default {
     description: 'Nincs adat',
   },
 };
+
+export default localeValues;

components/locale/hy_AM.tsx

@@ -1,3 +1,5 @@
+import { Locale } from '../locale-provider';
+
 const datePickerLocale = {
   lang: {
     locale: 'hy-am',
@@ -35,7 +37,7 @@ const datePickerLocale = {
   },
 };
 
-export default {
+const localeValues: Locale = {
   locale: 'hy-am',
   Pagination: {
     // Options.jsx
@@ -108,3 +110,5 @@ export default {
     back: 'Հետ',
   },
 };
+
+export default localeValues;

components/locale/id_ID.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/id_ID';
 import DatePicker from '../date-picker/locale/id_ID';
 import TimePicker from '../time-picker/locale/id_ID';
 import Calendar from '../calendar/locale/id_ID';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'id',
   Pagination,
   DatePicker,
@@ -43,3 +44,5 @@ export default {
     description: 'Tidak ada data',
   },
 };
+
+export default localeValues;

components/locale/is_IS.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/is_IS';
 import DatePicker from '../date-picker/locale/is_IS';
 import TimePicker from '../time-picker/locale/is_IS';
 import Calendar from '../calendar/locale/is_IS';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'is',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Engin gögn',
   },
 };
+
+export default localeValues;

components/locale/it_IT.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/it_IT';
 import DatePicker from '../date-picker/locale/it_IT';
 import TimePicker from '../time-picker/locale/it_IT';
 import Calendar from '../calendar/locale/it_IT';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'it',
   Pagination,
   DatePicker,
@@ -54,3 +55,5 @@ export default {
     expand: 'espandi',
   },
 };
+
+export default localeValues;

components/locale/ja_JP.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/ja_JP';
 import DatePicker from '../date-picker/locale/ja_JP';
 import TimePicker from '../time-picker/locale/ja_JP';
 import Calendar from '../calendar/locale/ja_JP';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'ja',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'データがありません',
   },
 };
+
+export default localeValues;

components/locale/kn_IN.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/kn_IN';
 import DatePicker from '../date-picker/locale/kn_IN';
 import TimePicker from '../time-picker/locale/kn_IN';
 import Calendar from '../calendar/locale/kn_IN';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'kn',
   Pagination,
   DatePicker,
@@ -49,3 +50,5 @@ export default {
     downloadFile: 'ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ',
   },
 };
+
+export default localeValues;

components/locale/ko_KR.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/ko_KR';
 import DatePicker from '../date-picker/locale/ko_KR';
 import TimePicker from '../time-picker/locale/ko_KR';
 import Calendar from '../calendar/locale/ko_KR';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'ko',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: '데이터 없음',
   },
 };
+
+export default localeValues;

components/locale/ku_IQ.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/ku_IQ';
 import DatePicker from '../date-picker/locale/ku_IQ';
 import TimePicker from '../time-picker/locale/ku_IQ';
 import Calendar from '../calendar/locale/ku_IQ';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'ku-iq',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Agahî tune',
   },
 };
+
+export default localeValues;

components/locale/lv_LV.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/lv_LV';
 import DatePicker from '../date-picker/locale/lv_LV';
 import TimePicker from '../time-picker/locale/lv_LV';
 import Calendar from '../calendar/locale/lv_LV';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'lv',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Nav datu',
   },
 };
+
+export default localeValues;

components/locale/mk_MK.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/mk_MK';
 import DatePicker from '../date-picker/locale/mk_MK';
 import TimePicker from '../time-picker/locale/mk_MK';
 import Calendar from '../calendar/locale/mk_MK';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'mk',
   Pagination,
   DatePicker,
@@ -56,3 +57,5 @@ export default {
     back: 'Назад',
   },
 };
+
+export default localeValues;

components/locale/mn_MN.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/mn_MN';
 import DatePicker from '../date-picker/locale/mn_MN';
 import TimePicker from '../time-picker/locale/mn_MN';
 import Calendar from '../calendar/locale/mn_MN';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'mn-mn',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Мэдээлэл байхгүй байна',
   },
 };
+
+export default localeValues;

components/locale/ms_MY.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/ms_MY';
 import DatePicker from '../date-picker/locale/ms_MY';
 import TimePicker from '../time-picker/locale/ms_MY';
 import Calendar from '../calendar/locale/ms_MY';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'ms-my',
   Pagination,
   DatePicker,
@@ -61,3 +62,5 @@ export default {
     downloadFile: 'Muat turun fail',
   },
 };
+
+export default localeValues;

components/locale/nb_NO.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/nb_NO';
 import DatePicker from '../date-picker/locale/nb_NO';
 import TimePicker from '../time-picker/locale/nb_NO';
 import Calendar from '../calendar/locale/nb_NO';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'nb',
   DatePicker,
   TimePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Ingen data',
   },
 };
+
+export default localeValues;

components/locale/ne_NP.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/en_US';
 import DatePicker from '../date-picker/locale/en_US';
 import TimePicker from '../time-picker/locale/en_US';
 import Calendar from '../calendar/locale/en_US';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'ne-np',
   Pagination,
   DatePicker,
@@ -42,3 +43,5 @@ export default {
     description: 'डाटा छैन',
   },
 };
+
+export default localeValues;

components/locale/nl_BE.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/nl_BE';
 import DatePicker from '../date-picker/locale/nl_BE';
 import TimePicker from '../time-picker/locale/nl_BE';
 import Calendar from '../calendar/locale/nl_BE';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'nl-be',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Geen gegevens',
   },
 };
+
+export default localeValues;

components/locale/nl_NL.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/nl_NL';
 import DatePicker from '../date-picker/locale/nl_NL';
 import TimePicker from '../time-picker/locale/nl_NL';
 import Calendar from '../calendar/locale/nl_NL';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'nl',
   Pagination,
   DatePicker,
@@ -60,3 +61,5 @@ export default {
     back: 'Terug',
   },
 };
+
+export default localeValues;

components/locale/pl_PL.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/pl_PL';
 import DatePicker from '../date-picker/locale/pl_PL';
 import TimePicker from '../time-picker/locale/pl_PL';
 import Calendar from '../calendar/locale/pl_PL';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'pl',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Brak danych',
   },
 };
+
+export default localeValues;

components/locale/pt_BR.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/pt_BR';
 import DatePicker from '../date-picker/locale/pt_BR';
 import TimePicker from '../time-picker/locale/pt_BR';
 import Calendar from '../calendar/locale/pt_BR';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'pt-br',
   Pagination,
   DatePicker,
@@ -47,3 +48,5 @@ export default {
     expand: 'expandir',
   },
 };
+
+export default localeValues;

components/locale/pt_PT.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/pt_PT';
 import DatePicker from '../date-picker/locale/pt_PT';
 import TimePicker from '../time-picker/locale/pt_PT';
 import Calendar from '../calendar/locale/pt_PT';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'pt',
   Pagination,
   DatePicker,
@@ -42,3 +43,5 @@ export default {
     description: 'Sem resultados',
   },
 };
+
+export default localeValues;

components/locale/ro_RO.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/ro_RO';
 import DatePicker from '../date-picker/locale/ro_RO';
 import TimePicker from '../time-picker/locale/ro_RO';
 import Calendar from '../calendar/locale/ro_RO';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'ro',
   Pagination,
   DatePicker,
@@ -60,3 +61,5 @@ export default {
     back: 'înapoi',
   },
 };
+
+export default localeValues;

components/locale/ru_RU.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/ru_RU';
 import DatePicker from '../date-picker/locale/ru_RU';
 import TimePicker from '../time-picker/locale/ru_RU';
 import Calendar from '../calendar/locale/ru_RU';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'ru',
   Pagination,
   DatePicker,
@@ -51,3 +52,5 @@ export default {
     back: 'назад',
   },
 };
+
+export default localeValues;

components/locale/sk_SK.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/sk_SK';
 import DatePicker from '../date-picker/locale/sk_SK';
 import TimePicker from '../time-picker/locale/sk_SK';
 import Calendar from '../calendar/locale/sk_SK';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'sk',
   Pagination,
   DatePicker,
@@ -60,3 +61,5 @@ export default {
     back: 'Späť',
   },
 };
+
+export default localeValues;

components/locale/sl_SI.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/sl_SI';
 import DatePicker from '../date-picker/locale/sl_SI';
 import TimePicker from '../time-picker/locale/sl_SI';
 import Calendar from '../calendar/locale/sl_SI';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'sl',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Ni podatkov',
   },
 };
+
+export default localeValues;

components/locale/sr_RS.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/sr_RS';
 import DatePicker from '../date-picker/locale/sr_RS';
 import TimePicker from '../time-picker/locale/sr_RS';
 import Calendar from '../calendar/locale/sr_RS';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'sr',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Nema podataka',
   },
 };
+
+export default localeValues;

components/locale/sv_SE.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/sv_SE';
 import DatePicker from '../date-picker/locale/sv_SE';
 import TimePicker from '../time-picker/locale/sv_SE';
 import Calendar from '../calendar/locale/sv_SE';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'sv',
   Pagination,
   DatePicker,
@@ -45,3 +46,5 @@ export default {
     downloadFile: 'Nedladdning fil',
   },
 };
+
+export default localeValues;

components/locale/ta_IN.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/ta_IN';
 import DatePicker from '../date-picker/locale/ta_IN';
 import TimePicker from '../time-picker/locale/ta_IN';
 import Calendar from '../calendar/locale/ta_IN';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'ta',
   Pagination,
   DatePicker,
@@ -61,3 +62,5 @@ export default {
     back: 'பின் செல்லவும்',
   },
 };
+
+export default localeValues;

components/locale/th_TH.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/th_TH';
 import DatePicker from '../date-picker/locale/th_TH';
 import TimePicker from '../time-picker/locale/th_TH';
 import Calendar from '../calendar/locale/th_TH';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'th',
   Pagination,
   DatePicker,
@@ -60,3 +61,5 @@ export default {
     back: 'ย้อนกลับ',
   },
 };
+
+export default localeValues;

components/locale/tr_TR.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/tr_TR';
 import DatePicker from '../date-picker/locale/tr_TR';
 import TimePicker from '../time-picker/locale/tr_TR';
 import Calendar from '../calendar/locale/tr_TR';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'tr',
   Pagination,
   DatePicker,
@@ -55,3 +56,5 @@ export default {
     expand: 'genişlet',
   },
 };
+
+export default localeValues;

components/locale/uk_UA.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/uk_UA';
 import DatePicker from '../date-picker/locale/uk_UA';
 import TimePicker from '../time-picker/locale/uk_UA';
 import Calendar from '../calendar/locale/uk_UA';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'uk',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Даних немає',
   },
 };
+
+export default localeValues;

components/locale/vi_VN.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/vi_VN';
 import DatePicker from '../date-picker/locale/vi_VN';
 import TimePicker from '../time-picker/locale/vi_VN';
 import Calendar from '../calendar/locale/vi_VN';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'vi',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Trống',
   },
 };
+
+export default localeValues;

components/locale/zh_CN.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/zh_CN';
 import DatePicker from '../date-picker/locale/zh_CN';
 import TimePicker from '../time-picker/locale/zh_CN';
 import Calendar from '../calendar/locale/zh_CN';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'zh-cn',
   Pagination,
   DatePicker,
@@ -23,6 +24,9 @@ export default {
     sortTitle: '排序',
     expand: '展开行',
     collapse: '关闭行',
+    triggerDesc: '点击降序',
+    triggerAsc: '点击升序',
+    cancelSort: '取消排序',
   },
   Modal: {
     okText: '确定',
@@ -61,3 +65,5 @@ export default {
     back: '返回',
   },
 };
+
+export default localeValues;

components/locale/zh_TW.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/zh_TW';
 import DatePicker from '../date-picker/locale/zh_TW';
 import TimePicker from '../time-picker/locale/zh_TW';
 import Calendar from '../calendar/locale/zh_TW';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'zh-tw',
   Pagination,
   DatePicker,
@@ -44,3 +45,5 @@ export default {
     back: '返回',
   },
 };
+
+export default localeValues;

components/modal/locale.tsx

@@ -7,7 +7,7 @@ export interface ModalLocale {
 }
 
 let runtimeLocale: ModalLocale = {
-  ...defaultLocale.Modal,
+  ...(defaultLocale.Modal as ModalLocale),
 };
 
 export function changeConfirmLocale(newLocale?: ModalLocale) {
@@ -18,7 +18,7 @@ export function changeConfirmLocale(newLocale?: ModalLocale) {
     };
   } else {
     runtimeLocale = {
-      ...defaultLocale.Modal,
+      ...(defaultLocale.Modal as ModalLocale),
     };
   }
 }

components/pagination/Pagination.tsx

@@ -7,6 +7,7 @@ import RightOutlined from '@ant-design/icons/RightOutlined';
 import DoubleLeftOutlined from '@ant-design/icons/DoubleLeftOutlined';
 import DoubleRightOutlined from '@ant-design/icons/DoubleRightOutlined';
 
+import ResponsiveObserve from '../_util/responsiveObserve';
 import MiniSelect from './MiniSelect';
 import Select from '../select';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
@@ -26,7 +27,8 @@ export interface PaginationProps {
   onShowSizeChange?: (current: number, size: number) => void;
   showQuickJumper?: boolean | { goButton?: React.ReactNode };
   showTotal?: (total: number, range: [number, number]) => React.ReactNode;
-  size?: string;
+  size?: 'default' | 'small';
+  responsive?: boolean;
   simple?: boolean;
   style?: React.CSSProperties;
   locale?: Object;
@@ -49,6 +51,26 @@ export interface PaginationConfig extends PaginationProps {
 export type PaginationLocale = any;
 
 export default class Pagination extends React.Component<PaginationProps, {}> {
+  private token: string;
+
+  private inferredSmall: boolean = false;
+
+  componentDidMount() {
+    this.token = ResponsiveObserve.subscribe(screens => {
+      const { xs } = screens;
+      const { size, responsive } = this.props;
+      const inferredSmall = !!(xs && !size && responsive);
+      if (this.inferredSmall !== inferredSmall) {
+        this.inferredSmall = inferredSmall;
+        this.forceUpdate();
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    ResponsiveObserve.unsubscribe(this.token);
+  }
+
   getIconsProps = (prefixCls: string, direction: 'ltr' | 'rtl' | undefined) => {
     let prevIcon = (
       <a className={`${prefixCls}-item-link`}>
@@ -108,7 +130,7 @@ export default class Pagination extends React.Component<PaginationProps, {}> {
       ...restProps
     } = this.props;
     const locale = { ...contextLocale, ...customLocale };
-    const isSmall = size === 'small';
+    const isSmall = size === 'small' || this.inferredSmall;
     return (
       <ConfigConsumer>
         {({ getPrefixCls, direction }: ConfigConsumerProps) => {

components/pagination/__tests__/index.test.js

@@ -36,4 +36,14 @@ describe('Pagination', () => {
         .props().disabled,
     ).toBe(true);
   });
+
+  it('should autometically be small when size is not specified', async () => {
+    const wrapper = mount(<Pagination responsive />);
+    expect(
+      wrapper
+        .find('ul')
+        .at(0)
+        .hasClass('mini'),
+    ).toBe(true);
+  });
 });

components/pagination/index.en-US.md

@@ -34,7 +34,8 @@ A long list can be divided into several pages using `Pagination`, and only one p
 | showTitle | Show page item's title | boolean | true |  |
 | showTotal | To display the total number and range | Function(total, range) | - |  |
 | simple | Whether to use simple mode | boolean | - |  |
-| size | Specify the size of `Pagination`, can be set to `small` | string | "" |  |
+| size | Specify the size of `Pagination`, can be set to `small`. | 'default' \| 'small'. | "" |  |
+| responsive | If `size` is not specified, `Pagination` would resize according to the width of the window | boolean | - |  |
 | total | Total number of data items | number | 0 |  |
 | onChange | Called when the page number is changed, and it takes the resulting page number and pageSize as its arguments | Function(page, pageSize) | noop |  |
 | onShowSizeChange | Called when `pageSize` is changed | Function(current, size) | noop |  |

components/pagination/index.zh-CN.md

@@ -34,7 +34,8 @@ cols: 1
 | showSizeChanger | 是否可以改变 pageSize | boolean | false |  |
 | showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - |  |
 | simple | 当添加该属性时，显示为简单分页 | boolean | - |  |
-| size | 当为「small」时，是小尺寸分页 | string | "" |  |
+| size | 当为「small」时，是小尺寸分页 | 'default' \| 'small' | "" |  |
+| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - |  |
 | total | 数据总数 | number | 0 |  |
 | onChange | 页码改变的回调，参数是改变后的页码及每页条数 | Function(page, pageSize) | noop |  |
 | onShowSizeChange | pageSize 变化的回调 | Function(current, size) | noop |  |

components/popconfirm/__tests__/__snapshots__/index.test.js.snap

@@ -2,6 +2,8 @@
 
 exports[`Popconfirm rtl render component should be rendered correctly in RTL direction 1`] = `<span />`;
 
-exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z\\"></path></svg></span><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div></div>"`;
+exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z\\"></path></svg></span><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
 
-exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z\\"></path></svg></span><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div></div>"`;
+exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z\\"></path></svg></span><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
+
+exports[`Popconfirm shows content for render functions 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z\\"></path></svg></span><div class=\\"ant-popover-message-title\\">some-title</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;

components/popconfirm/__tests__/index.test.js

@@ -58,6 +58,26 @@ describe('Popconfirm', () => {
     expect(popup.innerHTML).toMatchSnapshot();
   });
 
+  it('shows content for render functions', async () => {
+    const makeRenderFunction = content => () => content;
+
+    const popconfirm = mount(
+      <Popconfirm title={makeRenderFunction('some-title')}>
+        <span>show me your code</span>
+      </Popconfirm>,
+    );
+
+    expect(popconfirm.instance().getPopupDomNode()).toBe(null);
+
+    popconfirm.find('span').simulate('click');
+    await sleep(100);
+
+    const popup = popconfirm.instance().getPopupDomNode();
+    expect(popup).not.toBe(null);
+    expect(popup.innerHTML).toContain('some-title');
+    expect(popup.innerHTML).toMatchSnapshot();
+  });
+
   it('should be controlled by visible', () => {
     jest.useFakeTimers();
     const popconfirm = mount(

components/popconfirm/index.en-US.md

@@ -19,7 +19,7 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
 | cancelText | text of the Cancel button | string | `Cancel` |
 | okText | text of the Confirm button | string | `OK` |
 | okType | Button `type` of the Confirm button | string | `primary` |
-| title | title of the confirmation box | string\|ReactNode | - |
+| title | title of the confirmation box | string\|ReactNode\|() => ReactNode | - |
 | onCancel | callback of cancel | function(e) | - |
 | onConfirm | callback of confirmation | function(e) | - |
 | icon | customize icon of confirmation | ReactNode | `<ExclamationCircle />` |

components/popconfirm/index.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
-
 import Tooltip, { AbstractTooltipProps } from '../tooltip';
 import Button from '../button';
 import { ButtonType, NativeButtonProps } from '../button/button';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale/default';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { getRenderPropValue, RenderFunction } from '../_util/getRenderPropValue';
 
 export interface PopconfirmProps extends AbstractTooltipProps {
-  title: React.ReactNode;
+  title: React.ReactNode | RenderFunction;
   disabled?: boolean;
   onConfirm?: (e?: React.MouseEvent<HTMLElement>) => void;
   onCancel?: (e?: React.MouseEvent<HTMLElement>) => void;
@@ -118,11 +118,10 @@ class Popconfirm extends React.Component<PopconfirmProps, PopconfirmState> {
       icon,
     } = this.props;
     return (
-      <div>
       <div className={`${prefixCls}-inner-content`}>
         <div className={`${prefixCls}-message`}>
           {icon}
-            <div className={`${prefixCls}-message-title`}>{title}</div>
+          <div className={`${prefixCls}-message-title`}>{getRenderPropValue(title)}</div>
         </div>
         <div className={`${prefixCls}-buttons`}>
           <Button onClick={this.onCancel} size="small" {...cancelButtonProps}>
@@ -133,7 +132,6 @@ class Popconfirm extends React.Component<PopconfirmProps, PopconfirmState> {
           </Button>
         </div>
       </div>
-      </div>
     );
   };
 

components/popconfirm/index.zh-CN.md

@@ -20,7 +20,7 @@ title: Popconfirm
 | cancelText | 取消按钮文字 | string | 取消 |
 | okText | 确认按钮文字 | string | 确定 |
 | okType | 确认按钮类型 | string | primary |
-| title | 确认框的描述 | string\|ReactNode | - |
+| title | 确认框的描述 | string\|ReactNode\|() => ReactNode | - |
 | onCancel | 点击取消的回调 | function(e) | - |
 | onConfirm | 点击确认的回调 | function(e) | - |
 | icon | 自定义弹出气泡 Icon 图标 | ReactNode | `<ExclamationCircle />` |

components/popover/__tests__/__snapshots__/index.test.js.snap

@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Popover handles empty title/content props safely 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"></div></div></div>"`;
+
 exports[`Popover should be rendered correctly in RTL direction 1`] = `
 Array [
   <span
@@ -22,7 +24,6 @@ Array [
           class="ant-popover-inner"
           role="tooltip"
         >
-          <div>
           <div
             class="ant-popover-title"
           >
@@ -34,11 +35,10 @@ Array [
         </div>
       </div>
     </div>
-    </div>
   </div>,
 ]
 `;
 
-exports[`Popover should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div><div class=\\"ant-popover-title\\">code</div><div class=\\"ant-popover-inner-content\\">console.log('hello world')</div></div></div></div>"`;
+exports[`Popover should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-title\\">code</div><div class=\\"ant-popover-inner-content\\">console.log('hello world')</div></div></div>"`;
 
-exports[`Popover should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div><div class=\\"ant-popover-title\\">code</div><div class=\\"ant-popover-inner-content\\">console.log('hello world')</div></div></div></div>"`;
+exports[`Popover shows content for render functions 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-title\\">some-title</div><div class=\\"ant-popover-inner-content\\">some-content</div></div></div>"`;

components/popover/__tests__/index.test.js

@@ -24,6 +24,38 @@ describe('Popover', () => {
     expect(popup).not.toBe(null);
     expect(popup.className).toContain('ant-popover-placement-top');
     expect(popup.innerHTML).toMatchSnapshot();
+  });
+
+  it('shows content for render functions', () => {
+    const renderTitle = () => 'some-title';
+    const renderContent = () => 'some-content';
+
+    const popover = mount(
+      <Popover content={renderContent} title={renderTitle} trigger="click">
+        <span>show me your code</span>
+      </Popover>,
+    );
+
+    popover.find('span').simulate('click');
+
+    const popup = popover.instance().getPopupDomNode();
+    expect(popup).not.toBe(null);
+    expect(popup.innerHTML).toContain('some-title');
+    expect(popup.innerHTML).toContain('some-content');
+    expect(popup.innerHTML).toMatchSnapshot();
+  });
+
+  it('handles empty title/content props safely', () => {
+    const popover = mount(
+      <Popover trigger="click">
+        <span>show me your code</span>
+      </Popover>,
+    );
+
+    popover.find('span').simulate('click');
+
+    const popup = popover.instance().getPopupDomNode();
+    expect(popup).not.toBe(null);
     expect(popup.innerHTML).toMatchSnapshot();
   });
 

components/popover/index.en-US.md

@@ -15,9 +15,9 @@ Comparing with `Tooltip`, besides information `Popover` card can also provide ac
 ## API
 
 | Param   | Description         | Type                               | Default value | Version |
-| ------- | ------------------- | ----------------- | ------------- | ------- |
+| ------- | ------------------- | ---------------------------------- | ------------- | ------- |
-| content | Content of the card | string\|ReactNode | -             |         |
+| content | Content of the card | string\|ReactNode\|() => ReactNode | -             |         |
-| title   | Title of the card   | string\|ReactNode | -             |         |
+| title   | Title of the card   | string\|ReactNode\|() => ReactNode | -             |         |
 
 Consult [Tooltip's documentation](https://ant.design/components/tooltip/#API) to find more APIs.
 

components/popover/index.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import Tooltip, { AbstractTooltipProps, TooltipPlacement } from '../tooltip';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { getRenderPropValue, RenderFunction } from '../_util/getRenderPropValue';
 
 export interface PopoverProps extends AbstractTooltipProps {
-  title?: React.ReactNode;
+  title?: React.ReactNode | RenderFunction;
-  content?: React.ReactNode;
+  content?: React.ReactNode | RenderFunction;
 }
 
 export default class Popover extends React.Component<PopoverProps, {}> {
@@ -26,10 +27,10 @@ export default class Popover extends React.Component<PopoverProps, {}> {
   getOverlay(prefixCls: string) {
     const { title, content } = this.props;
     return (
-      <div>
+      <>
-        {title && <div className={`${prefixCls}-title`}>{title}</div>}
+        {title && <div className={`${prefixCls}-title`}>{getRenderPropValue(title)}</div>}
-        <div className={`${prefixCls}-inner-content`}>{content}</div>
+        <div className={`${prefixCls}-inner-content`}>{getRenderPropValue(content)}</div>
-      </div>
+      </>
     );
   }
 

components/popover/index.zh-CN.md

@@ -16,9 +16,9 @@ title: Popover
 ## API
 
 | 参数    | 说明     | 类型                               | 默认值 | 版本 |
-| ------- | -------- | ----------------- | ------ | ---- |
+| ------- | -------- | ---------------------------------- | ------ | ---- |
-| content | 卡片内容 | string\|ReactNode | 无     |      |
+| content | 卡片内容 | string\|ReactNode\|() => ReactNode | 无     |      |
-| title   | 卡片标题 | string\|ReactNode | 无     |      |
+| title   | 卡片标题 | string\|ReactNode\|() => ReactNode | 无     |      |
 
 更多属性请参考 [Tooltip](/components/tooltip/#API)。
 

components/select/index.en-US.md

@@ -30,7 +30,7 @@ Select component to select value from options.
 | defaultValue | Initial selected option. | string\|string\[]<br />number\|number\[]<br />LabeledValue\|LabeledValue[] | - |  |
 | disabled | Whether disabled select | boolean | false |  |
 | dropdownClassName | className of dropdown menu | string | - |  |
-| dropdownMatchSelectWidth | Whether dropdown's width is same with select. | boolean | true |  |
+| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. `false` will disable virtual scroll | boolean \| number | true |  |
 | dropdownRender | Customize dropdown content | (menuNode: ReactNode, props) => ReactNode | - |  |
 | dropdownStyle | style of dropdown menu | object | - |  |
 | dropdownMenuStyle | additional style applied to dropdown menu | object | - |  |
@@ -56,6 +56,7 @@ Select component to select value from options.
 | menuItemSelectedIcon | The custom menuItemSelected icon with multiple options | ReactNode | - |  |
 | tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] |  |  |
 | value | Current selected option. | string\|string\[]\<br />number\|number\[]\<br />LabeledValue\|LabeledValue[] | - |  |
+| virtual | Disable virtual scroll when set to `false` | boolean | - | 4.1.0 |
 | onBlur | Called when blur | function | - |  |
 | onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, option:Option/Array&lt;Option>) | - |  |
 | onDeselect | Called when a option is deselected, param is the selected option's value. Only called for multiple or tags, effective in multiple or tags mode only. | function(string\|number\|LabeledValue) | - |  |
@@ -82,7 +83,7 @@ Select component to select value from options.
 ### Option props
 
 | Property  | Description                                | Type           | Default | Version |
-| --- | --- | --- | --- | --- |
+| --------- | ------------------------------------------ | -------------- | ------- | ------- |
 | disabled  | Disable this option                        | boolean        | false   |         |
 | title     | `title` of Select after select this Option | string         | -       |         |
 | value     | default to filter with this property       | string\|number | -       |         |

components/select/index.zh-CN.md

@@ -31,7 +31,7 @@ title: Select
 | defaultValue | 指定默认选中的条目 | string\|string\[]\<br />number\|number\[]\<br />LabeledValue\|LabeledValue[] | - |  |
 | disabled | 是否禁用 | boolean | false |  |
 | dropdownClassName | 下拉菜单的 className 属性 | string | - |  |
-| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |  |
+| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`。`false` 时会关闭虚拟滚动 | boolean \| number | true |  |
 | dropdownRender | 自定义下拉框内容 | (menuNode: ReactNode, props) => ReactNode | - |  |
 | dropdownStyle | 下拉菜单的 style 属性 | object | - |  |
 | dropdownMenuStyle | dropdown 菜单自定义样式 | object | - |  |
@@ -57,6 +57,7 @@ title: Select
 | menuItemSelectedIcon | 自定义多选时当前选中的条目图标 | ReactNode | - |  |
 | tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] |  |  |
 | value | 指定当前选中的条目 | string\|string\[]\<br />number\|number\[]\<br />LabeledValue\|LabeledValue[] | - |  |
+| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.1.0 |
 | onBlur | 失去焦点时回调 | function | - |  |
 | onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value, option:Option/Array&lt;Option>) | - |  |
 | onDeselect | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效 | function(string\|number\|LabeledValue) | - |  |
@@ -85,7 +86,7 @@ title: Select
 ### Option props
 
 | 参数      | 说明                              | 类型           | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
+| --------- | --------------------------------- | -------------- | ------ | ---- |
 | disabled  | 是否禁用                          | boolean        | false  |      |
 | title     | 选中该 Option 后，Select 的 title | string         | -      |      |
 | value     | 默认根据此属性值进行筛选          | string\|number | -      |      |

components/table/Table.tsx

@@ -79,6 +79,7 @@ export interface TableProps<RecordType>
     scrollToFirstRowOnChange?: boolean;
   };
   sortDirections?: SortOrder[];
+  showSorterTooltip?: boolean;
 }
 
 function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
@@ -108,6 +109,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
     scroll,
     sortDirections,
     locale,
+    showSorterTooltip = true,
   } = props;
 
   const tableProps = omit(props, ['className', 'style']) as TableProps<RecordType>;
@@ -214,13 +216,14 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
       false,
     );
   };
-
   const [transformSorterColumns, sortStates, sorterTitleProps, getSorters] = useSorter<RecordType>({
     prefixCls,
     columns,
     children,
     onSorterChange,
     sortDirections: sortDirections || ['ascend', 'descend'],
+    tableLocale,
+    showSorterTooltip,
   });
   const sortedData = React.useMemo(() => getSortData(rawData, sortStates, childrenColumnName), [
     rawData,

components/table/__tests__/Table.filter.test.js

@@ -10,6 +10,15 @@ import ConfigProvider from '../../config-provider';
 // https://github.com/Semantic-Org/Semantic-UI-React/blob/72c45080e4f20b531fda2e3e430e384083d6766b/test/specs/modules/Dropdown/Dropdown-test.js#L73
 const nativeEvent = { nativeEvent: { stopImmediatePropagation: () => {} } };
 
+function getDropdownWrapper(wrapper) {
+  return mount(
+    wrapper
+      .find('Trigger')
+      .instance()
+      .getComponent(),
+  );
+}
+
 describe('Table.filter', () => {
   const filterFn = (value, record) => record.name.indexOf(value) !== -1;
   const column = {
@@ -235,7 +244,7 @@ describe('Table.filter', () => {
       .simulate('click');
     wrapper
       .find('FilterDropdown')
-      .find('.confirm')
+      .find('.ant-table-filter-dropdown-btns .ant-btn-primary')
       .simulate('click');
     expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toEqual(['boy']);
     wrapper.setProps({ dataSource: [...data, { key: 999, name: 'Chris' }] });
@@ -379,7 +388,7 @@ describe('Table.filter', () => {
       .simulate('click');
     wrapper
       .find('FilterDropdown')
-      .find('.confirm')
+      .find('.ant-table-filter-dropdown-btns .ant-btn-primary')
       .simulate('click');
 
     expect(handleChange).toHaveBeenCalledWith(
@@ -400,75 +409,73 @@ describe('Table.filter', () => {
       .find('.ant-dropdown-trigger')
       .first()
       .simulate('click');
-    wrapper.find('.clear').simulate('click');
+    wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-link').simulate('click');
 
     expect(handleChange).not.toHaveBeenCalled();
   });
 
-  // enzyme not correct update function component under mini store.
+  it('three levels menu', () => {
-  // It's correct in `instance().props` but failed in `props()`
+    const filters = [
-  // it.skip('three levels menu', () => {
+      { text: 'Upper', value: 'Upper' },
-  //   const filters = [
+      { text: 'Lower', value: 'Lower' },
-  //     { text: 'Upper', value: 'Upper' },
+      {
-  //     { text: 'Lower', value: 'Lower' },
+        text: 'Level2',
-  //     {
+        value: 'Level2',
-  //       text: 'Level2',
+        children: [
-  //       value: 'Level2',
+          { text: 'Large', value: 'Large' },
-  //       children: [
+          { text: 'Small', value: 'Small' },
-  //         { text: 'Large', value: 'Large' },
+          {
-  //         { text: 'Small', value: 'Small' },
+            text: 'Level3',
-  //         {
+            value: 'Level3',
-  //           text: 'Level3',
+            children: [
-  //           value: 'Level3',
+              { text: 'Black', value: 'Black' },
-  //           children: [
+              { text: 'White', value: 'White' },
-  //             { text: 'Black', value: 'Black' },
+              { text: 'Jack', value: 'Jack' },
-  //             { text: 'White', value: 'White' },
+            ],
-  //             { text: 'Jack', value: 'Jack' },
+          },
-  //           ],
+        ],
-  //         },
+      },
-  //       ],
+    ];
-  //     },
+    const wrapper = mount(
-  //   ];
+      createTable({
-  //   const wrapper = mount(
+        columns: [
-  //     createTable({
+          {
-  //       columns: [
+            ...column,
-  //         {
+            filters,
-  //           ...column,
+          },
-  //           filters,
+        ],
-  //         },
+      }),
-  //       ],
+    );
-  //     }),
+    jest.useFakeTimers();
-  //   );
-  //   jest.useFakeTimers();
-  //   const dropdownWrapper = getDropdownWrapper(wrapper);
-  //   expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
 
-  //   // select
+    let dropdownWrapper = getDropdownWrapper(wrapper);
-  //   dropdownWrapper
+    expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
-  //     .find('.ant-dropdown-menu-submenu-title')
+    // select
-  //     .at(0)
+    dropdownWrapper
-  //     .simulate('mouseEnter');
+      .find('.ant-dropdown-menu-submenu-title')
-  //   jest.runAllTimers();
+      .at(0)
-  //   dropdownWrapper.update();
+      .simulate('mouseEnter');
-  //   dropdownWrapper
+    jest.runAllTimers();
-  //     .find('.ant-dropdown-menu-submenu-title')
+    dropdownWrapper = getDropdownWrapper(wrapper);
-  //     .at(1)
+    dropdownWrapper
-  //     .simulate('mouseEnter');
+      .find('.ant-dropdown-menu-submenu-title')
-  //   jest.runAllTimers();
+      .at(1)
-  //   dropdownWrapper.update();
+      .simulate('mouseEnter');
-  //   dropdownWrapper
+    jest.runAllTimers();
-  //     .find('MenuItem')
+    dropdownWrapper = getDropdownWrapper(wrapper);
-  //     .last()
+    dropdownWrapper
-  //     .simulate('click');
+      .find('MenuItem')
-  //   dropdownWrapper.find('.confirm').simulate('click');
+      .last()
-  //   wrapper.update();
+      .simulate('click');
-  //   expect(renderedNames(wrapper)).toEqual(['Jack']);
+    dropdownWrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
-  //   dropdownWrapper
+    wrapper.update();
-  //     .find('MenuItem')
+    expect(renderedNames(wrapper)).toEqual(['Jack']);
-  //     .last()
+    dropdownWrapper
-  //     .simulate('click');
+      .find('MenuItem')
-  //   jest.useRealTimers();
+      .last()
-  // });
+      .simulate('click');
+    jest.useRealTimers();
+  });
 
   describe('should support value types', () => {
     [
@@ -501,7 +508,7 @@ describe('Table.filter', () => {
           .first()
           .simulate('click');
         // This test can be remove if refactor
-        wrapper.find('.confirm').simulate('click');
+        wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
         wrapper.update();
 
         expect(
@@ -581,11 +588,11 @@ describe('Table.filter', () => {
       .find('MenuItem')
       .first()
       .simulate('click');
-    wrapper.find('.confirm').simulate('click');
+    wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
     wrapper.update();
     expect(renderedNames(wrapper)).toEqual(['Jack']);
 
-    wrapper.find('.clear').simulate('click');
+    wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-link').simulate('click');
     wrapper.update();
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
   });
@@ -872,7 +879,7 @@ describe('Table.filter', () => {
       .find('MenuItem')
       .first()
       .simulate('click');
-    wrapper.find('.confirm').simulate('click');
+    wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
     expect(onChange).toHaveBeenCalled();
     onChange.mockReset();
     expect(onChange).not.toHaveBeenCalled();
@@ -890,7 +897,7 @@ describe('Table.filter', () => {
       .find('MenuItem')
       .first()
       .simulate('click');
-    wrapper.find('.confirm').simulate('click');
+    wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
     expect(onChange).toHaveBeenCalled();
   });
 
@@ -1025,7 +1032,7 @@ describe('Table.filter', () => {
       .find('MenuItem')
       .first()
       .simulate('click');
-    wrapper.find('.confirm').simulate('click');
+    wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
 
     expect(handleChange).toHaveBeenCalledWith(
       {
@@ -1062,7 +1069,7 @@ describe('Table.filter', () => {
       .find('MenuItem')
       .first()
       .simulate('click');
-    wrapper.find('.confirm').simulate('click');
+    wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
 
     expect(handleChange).toHaveBeenCalledWith(
       {
@@ -1155,7 +1162,7 @@ describe('Table.filter', () => {
       .find('.ant-dropdown-menu-item')
       .first()
       .simulate('click');
-    wrapper.find('.ant-table-filter-dropdown-link.confirm').simulate('click');
+    wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
     expect(onChange).toHaveBeenCalledWith(
       expect.anything(),
       {
@@ -1185,15 +1192,12 @@ describe('Table.filter', () => {
       }),
     );
 
+    expect(wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').text()).toEqual(
+      'Bamboo',
+    );
     expect(
       wrapper
-        .find('.ant-table-filter-dropdown-link')
+        .find('.ant-table-filter-dropdown-btns .ant-btn-link')
-        .first()
-        .text(),
-    ).toEqual('Bamboo');
-    expect(
-      wrapper
-        .find('.ant-table-filter-dropdown-link')
         .last()
         .text(),
     ).toEqual('Reset');

components/table/__tests__/Table.rowSelection.test.js

@@ -638,7 +638,7 @@ describe('Table.rowSelection', () => {
           .simulate('click');
       });
       wrapper
-        .find('.ant-table-filter-dropdown-btns .ant-table-filter-dropdown-link.confirm')
+        .find('.ant-table-filter-dropdown-btns .ant-btn-primary')
         .simulate('click');
     }
 

components/table/__tests__/Table.sorter.test.js

@@ -150,6 +150,45 @@ describe('Table.sorter', () => {
     expect(sorter3.columnKey).toBe('name');
   });
 
+  it('hover header show sorter tooltip', () => {
+    // tooltip has delay
+    jest.useFakeTimers();
+    const wrapper = mount(createTable({}));
+    // default show sorter tooltip
+    wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
+    jest.runAllTimers();
+    wrapper.update();
+    expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
+    wrapper.find('.ant-table-column-sorters').simulate('mouseout');
+    // set table props showSorterTooltip is false
+    wrapper.setProps({ showSorterTooltip: false });
+    wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
+    jest.runAllTimers();
+    wrapper.update();
+    expect(wrapper.find('.ant-tooltip-open').length).toBeFalsy();
+    wrapper.find('.ant-table-column-sorters').simulate('mouseout');
+    // set table props showSorterTooltip is false, column showSorterTooltip is true
+    wrapper.setProps({
+      showSorterTooltip: false,
+      columns: [{ ...column, showSorterTooltip: true }],
+    });
+    wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
+    jest.runAllTimers();
+    wrapper.update();
+    expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
+    wrapper.find('.ant-table-column-sorters').simulate('mouseout');
+    // set table props showSorterTooltip is true, column showSorterTooltip is false
+    wrapper.setProps({
+      showSorterTooltip: true,
+      columns: [{ ...column, showSorterTooltip: false }],
+    });
+    wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
+    jest.runAllTimers();
+    wrapper.update();
+    expect(wrapper.find('.ant-tooltip-open').length).toBeFalsy();
+    wrapper.find('.ant-table-column-sorters').simulate('mouseout');
+  });
+
   it('works with grouping columns in controlled mode', () => {
     const columns = [
       {

components/table/__tests__/__snapshots__/Table.filter.test.js.snap

@@ -508,16 +508,23 @@ exports[`Table.filter renders menu correctly 1`] = `
       <div
         class="ant-table-filter-dropdown-btns"
       >
-        <a
+        <button
-          class="ant-table-filter-dropdown-link confirm"
+          class="ant-btn ant-btn-link ant-btn-sm"
-        >
+          disabled=""
-          OK
+          type="button"
-        </a>
-        <a
-          class="ant-table-filter-dropdown-link clear"
         >
+          <span>
             Reset
-        </a>
+          </span>
+        </button>
+        <button
+          class="ant-btn ant-btn-primary ant-btn-sm"
+          type="button"
+        >
+          <span>
+            OK
+          </span>
+        </button>
       </div>
     </div>
   </div>
@@ -605,16 +612,23 @@ exports[`Table.filter renders radio filter correctly 1`] = `
       <div
         class="ant-table-filter-dropdown-btns"
       >
-        <a
+        <button
-          class="ant-table-filter-dropdown-link confirm"
+          class="ant-btn ant-btn-link ant-btn-sm"
-        >
+          disabled=""
-          OK
+          type="button"
-        </a>
-        <a
-          class="ant-table-filter-dropdown-link clear"
         >
+          <span>
             Reset
-        </a>
+          </span>
+        </button>
+        <button
+          class="ant-btn ant-btn-primary ant-btn-sm"
+          type="button"
+        >
+          <span>
+            OK
+          </span>
+        </button>
       </div>
     </div>
   </div>
@@ -769,16 +783,23 @@ exports[`Table.filter should support getPopupContainer 1`] = `
                               <div
                                 class="ant-table-filter-dropdown-btns"
                               >
-                                <a
+                                <button
-                                  class="ant-table-filter-dropdown-link confirm"
+                                  class="ant-btn ant-btn-link ant-btn-sm"
-                                >
+                                  disabled=""
-                                  OK
+                                  type="button"
-                                </a>
-                                <a
-                                  class="ant-table-filter-dropdown-link clear"
                                 >
+                                  <span>
                                     Reset
-                                </a>
+                                  </span>
+                                </button>
+                                <button
+                                  class="ant-btn ant-btn-primary ant-btn-sm"
+                                  type="button"
+                                >
+                                  <span>
+                                    OK
+                                  </span>
+                                </button>
                               </div>
                             </div>
                           </div>
@@ -995,16 +1016,23 @@ exports[`Table.filter should support getPopupContainer from ConfigProvider 1`] =
                               <div
                                 class="ant-table-filter-dropdown-btns"
                               >
-                                <a
+                                <button
-                                  class="ant-table-filter-dropdown-link confirm"
+                                  class="ant-btn ant-btn-link ant-btn-sm"
-                                >
+                                  disabled=""
-                                  OK
+                                  type="button"
-                                </a>
-                                <a
-                                  class="ant-table-filter-dropdown-link clear"
                                 >
+                                  <span>
                                     Reset
-                                </a>
+                                  </span>
+                                </button>
+                                <button
+                                  class="ant-btn ant-btn-primary ant-btn-sm"
+                                  type="button"
+                                >
+                                  <span>
+                                    OK
+                                  </span>
+                                </button>
                               </div>
                             </div>
                           </div>

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -12217,6 +12217,396 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
 </div>
 `;
 
+exports[`renders ./components/table/demo/row-selection-custom-debug.md correctly 1`] = `
+<div
+  class="ant-table-wrapper"
+>
+  <div
+    class="ant-spin-nested-loading"
+  >
+    <div
+      class="ant-spin-container"
+    >
+      <div
+        class="ant-table"
+      >
+        <div
+          class="ant-table-container"
+        >
+          <div
+            class="ant-table-content"
+          >
+            <table
+              style="table-layout:auto"
+            >
+              <colgroup>
+                <col
+                  style="width:60px;min-width:60px"
+                />
+                <col />
+              </colgroup>
+              <thead>
+                <tr>
+                  <th
+                    class="ant-table-cell ant-table-selection-column"
+                  >
+                    <div
+                      class="ant-table-selection"
+                    >
+                      <label
+                        class="ant-checkbox-wrapper"
+                      >
+                        <span
+                          class="ant-checkbox"
+                        >
+                          <input
+                            class="ant-checkbox-input"
+                            type="checkbox"
+                          />
+                          <span
+                            class="ant-checkbox-inner"
+                          />
+                        </span>
+                      </label>
+                    </div>
+                  </th>
+                  <th
+                    class="ant-table-cell"
+                  >
+                    Name
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="ant-table-tbody"
+              >
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="0"
+                >
+                  <td
+                    class="ant-table-cell ant-table-selection-column"
+                    rowspan="2"
+                  >
+                    false: 
+                    <label
+                      class="ant-checkbox-wrapper"
+                    >
+                      <span
+                        class="ant-checkbox"
+                      >
+                        <input
+                          class="ant-checkbox-input"
+                          type="checkbox"
+                        />
+                        <span
+                          class="ant-checkbox-inner"
+                        />
+                      </span>
+                    </label>
+                  </td>
+                  <td
+                    class="ant-table-cell"
+                  >
+                    Edward King 0
+                  </td>
+                </tr>
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="1"
+                >
+                  <td
+                    class="ant-table-cell"
+                  >
+                    Another Row
+                  </td>
+                </tr>
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="2"
+                >
+                  <td
+                    class="ant-table-cell ant-table-selection-column"
+                    rowspan="2"
+                  >
+                    false: 
+                    <label
+                      class="ant-checkbox-wrapper"
+                    >
+                      <span
+                        class="ant-checkbox"
+                      >
+                        <input
+                          class="ant-checkbox-input"
+                          type="checkbox"
+                        />
+                        <span
+                          class="ant-checkbox-inner"
+                        />
+                      </span>
+                    </label>
+                  </td>
+                  <td
+                    class="ant-table-cell"
+                  >
+                    Edward King 2
+                  </td>
+                </tr>
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="3"
+                >
+                  <td
+                    class="ant-table-cell"
+                  >
+                    Another Row
+                  </td>
+                </tr>
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="4"
+                >
+                  <td
+                    class="ant-table-cell ant-table-selection-column"
+                    rowspan="2"
+                  >
+                    false: 
+                    <label
+                      class="ant-checkbox-wrapper"
+                    >
+                      <span
+                        class="ant-checkbox"
+                      >
+                        <input
+                          class="ant-checkbox-input"
+                          type="checkbox"
+                        />
+                        <span
+                          class="ant-checkbox-inner"
+                        />
+                      </span>
+                    </label>
+                  </td>
+                  <td
+                    class="ant-table-cell"
+                  >
+                    Edward King 4
+                  </td>
+                </tr>
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="5"
+                >
+                  <td
+                    class="ant-table-cell"
+                  >
+                    Another Row
+                  </td>
+                </tr>
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="6"
+                >
+                  <td
+                    class="ant-table-cell ant-table-selection-column"
+                    rowspan="2"
+                  >
+                    false: 
+                    <label
+                      class="ant-checkbox-wrapper"
+                    >
+                      <span
+                        class="ant-checkbox"
+                      >
+                        <input
+                          class="ant-checkbox-input"
+                          type="checkbox"
+                        />
+                        <span
+                          class="ant-checkbox-inner"
+                        />
+                      </span>
+                    </label>
+                  </td>
+                  <td
+                    class="ant-table-cell"
+                  >
+                    Edward King 6
+                  </td>
+                </tr>
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="7"
+                >
+                  <td
+                    class="ant-table-cell"
+                  >
+                    Another Row
+                  </td>
+                </tr>
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="8"
+                >
+                  <td
+                    class="ant-table-cell ant-table-selection-column"
+                    rowspan="2"
+                  >
+                    false: 
+                    <label
+                      class="ant-checkbox-wrapper"
+                    >
+                      <span
+                        class="ant-checkbox"
+                      >
+                        <input
+                          class="ant-checkbox-input"
+                          type="checkbox"
+                        />
+                        <span
+                          class="ant-checkbox-inner"
+                        />
+                      </span>
+                    </label>
+                  </td>
+                  <td
+                    class="ant-table-cell"
+                  >
+                    Edward King 8
+                  </td>
+                </tr>
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="9"
+                >
+                  <td
+                    class="ant-table-cell"
+                  >
+                    Another Row
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <ul
+        class="ant-pagination ant-table-pagination"
+        unselectable="unselectable"
+      >
+        <li
+          aria-disabled="true"
+          class="ant-pagination-prev ant-pagination-disabled"
+          title="Previous Page"
+        >
+          <a
+            class="ant-pagination-item-link"
+            disabled=""
+          >
+            <span
+              aria-label="left"
+              class="anticon anticon-left"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="left"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+                />
+              </svg>
+            </span>
+          </a>
+        </li>
+        <li
+          class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
+          title="1"
+        >
+          <a>
+            1
+          </a>
+        </li>
+        <li
+          class="ant-pagination-item ant-pagination-item-2"
+          tabindex="0"
+          title="2"
+        >
+          <a>
+            2
+          </a>
+        </li>
+        <li
+          class="ant-pagination-item ant-pagination-item-3"
+          tabindex="0"
+          title="3"
+        >
+          <a>
+            3
+          </a>
+        </li>
+        <li
+          class="ant-pagination-item ant-pagination-item-4"
+          tabindex="0"
+          title="4"
+        >
+          <a>
+            4
+          </a>
+        </li>
+        <li
+          class="ant-pagination-item ant-pagination-item-5"
+          tabindex="0"
+          title="5"
+        >
+          <a>
+            5
+          </a>
+        </li>
+        <li
+          aria-disabled="false"
+          class="ant-pagination-next"
+          tabindex="0"
+          title="Next Page"
+        >
+          <a
+            class="ant-pagination-item-link"
+          >
+            <span
+              aria-label="right"
+              class="anticon anticon-right"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="right"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                />
+              </svg>
+            </span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/table/demo/size.md correctly 1`] = `
 <div>
   <h4>

components/table/demo/row-selection-custom-debug.md

@@ -0,0 +1,50 @@
+---
+order: 99
+title:
+  en-US: Custom selection group
+  zh-CN: 自定义选择项组
+debug: true
+---
+
+## zh-CN
+
+自定义选项分组。
+
+## en-US
+
+Customize selection group.
+
+```jsx
+import { Table } from 'antd';
+
+const columns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+  },
+];
+
+const data = [];
+for (let i = 0; i < 46; i++) {
+  data.push({
+    key: i,
+    name: i % 2 === 0 ? `Edward King ${i}` : 'Another Row',
+  });
+}
+
+const App = () => {
+  const rowSelection = {
+    renderCell: (checked, record, index, node) => ({
+      props: { rowSpan: index % 2 === 0 ? 2 : 0 },
+      children: (
+        <>
+          {String(checked)}: {node}
+        </>
+      ),
+    }),
+  };
+  return <Table rowSelection={rowSelection} columns={columns} dataSource={data} />;
+};
+
+ReactDOM.render(<App />, mountNode);
+```

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import FilterFilled from '@ant-design/icons/FilterFilled';
+import Button from '../../../button';
 import Menu from '../../../menu';
 import Checkbox from '../../../checkbox';
 import Radio from '../../../radio';
@@ -173,6 +174,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
   } else if (column.filterDropdown) {
     dropdownContent = column.filterDropdown;
   } else {
+    const selectedKeys = (getFilteredKeysSync() || []) as any;
     dropdownContent = (
       <>
         <Menu
@@ -182,7 +184,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
           onClick={onMenuClick}
           onSelect={onSelectKeys}
           onDeselect={onSelectKeys}
-          selectedKeys={(getFilteredKeysSync() || []) as any}
+          selectedKeys={selectedKeys}
           getPopupContainer={getPopupContainer}
           openKeys={openKeys}
           onOpenChange={onOpenChange}
@@ -190,12 +192,12 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
           {renderFilterItems(column.filters || [], prefixCls, getFilteredKeysSync(), filterMultiple)}
         </Menu>
         <div className={`${prefixCls}-dropdown-btns`}>
-          <a className={`${prefixCls}-dropdown-link confirm`} onClick={onConfirm}>
+          <Button type="link" size="small" disabled={selectedKeys.length === 0} onClick={onReset}>
-            {locale.filterConfirm}
-          </a>
-          <a className={`${prefixCls}-dropdown-link clear`} onClick={onReset}>
             {locale.filterReset}
-          </a>
+          </Button>
+          <Button type="primary" size="small" onClick={onConfirm}>
+            {locale.filterConfirm}
+          </Button>
         </div>
       </>
     );

components/table/hooks/useSelection.tsx

@@ -76,6 +76,7 @@ export default function useSelection<RecordType>(
     type: selectionType,
     selections,
     fixed,
+    renderCell: customizeRenderCell,
   } = rowSelection || {};
 
   const {
@@ -305,33 +306,42 @@ export default function useSelection<RecordType>(
       }
 
       // Body Cell
-      let renderCell: (_: RecordType, record: RecordType, index: number) => React.ReactNode;
+      let renderCell: (
+        _: RecordType,
+        record: RecordType,
+        index: number,
+      ) => { node: React.ReactNode; checked: boolean };
       if (selectionType === 'radio') {
         renderCell = (_, record, index) => {
           const key = getRowKey(record, index);
+          const checked = keySet.has(key);
 
-          return (
+          return {
+            node: (
               <Radio
                 {...checkboxPropsMap.get(key)}
-              checked={keySet.has(key)}
+                checked={checked}
                 onChange={event => {
                   if (!keySet.has(key)) {
                     triggerSingleSelection(key, true, [key], event.nativeEvent);
                   }
                 }}
               />
-          );
+            ),
+            checked,
+          };
         };
       } else {
         renderCell = (_, record, index) => {
           const key = getRowKey(record, index);
-          const hasKey = keySet.has(key);
+          const checked = keySet.has(key);
 
           // Record checked
-          return (
+          return {
+            node: (
               <Checkbox
                 {...checkboxPropsMap.get(key)}
-              checked={hasKey}
+                checked={checked}
                 onChange={({ nativeEvent }) => {
                   const { shiftKey } = nativeEvent;
 
@@ -361,7 +371,7 @@ export default function useSelection<RecordType>(
                     const rangeKeys = recordKeys.slice(startIndex, endIndex + 1);
                     const changedKeys: Key[] = [];
 
-                  if (hasKey) {
+                    if (checked) {
                       rangeKeys.forEach(recordKey => {
                         if (keySet.has(recordKey)) {
                           changedKeys.push(recordKey);
@@ -381,35 +391,47 @@ export default function useSelection<RecordType>(
                     setSelectedKeys(keys);
                     if (onSelectMultiple) {
                       onSelectMultiple(
-                      !hasKey,
+                        !checked,
                         keys.map(recordKey => getRecordByKey(recordKey)),
                         changedKeys.map(recordKey => getRecordByKey(recordKey)),
                       );
                     }
                   } else {
                     // Single record selected
-                  if (hasKey) {
+                    if (checked) {
                       keySet.delete(key);
                     } else {
                       keySet.add(key);
                     }
 
-                  triggerSingleSelection(key, !hasKey, Array.from(keySet), nativeEvent);
+                    triggerSingleSelection(key, !checked, Array.from(keySet), nativeEvent);
                   }
 
                   setLastSelectedKey(key);
                 }}
               />
-          );
+            ),
+            checked,
+          };
         };
       }
 
+      const renderSelectionCell = (_: any, record: RecordType, index: number) => {
+        const { node, checked } = renderCell(_, record, index);
+
+        if (customizeRenderCell) {
+          return customizeRenderCell(checked, record, index, node);
+        }
+
+        return node;
+      };
+
       // Columns
       const selectionColumn = {
         width: selectionColWidth,
         className: `${prefixCls}-selection-column`,
         title: rowSelection.columnTitle || title,
-        render: renderCell,
+        render: renderSelectionCell,
       };
 
       if (expandType === 'row' && columns.length && !expandIconColumnIndex) {

components/table/hooks/useSorter.tsx

@@ -12,9 +12,14 @@ import {
   CompareFn,
   ColumnTitleProps,
   SorterResult,
+  TableLocale,
 } from '../interface';
+import Tooltip from '../../tooltip';
 import { getColumnKey, getColumnPos, renderColumnTitle } from '../util';
 
+const ASCEND = 'ascend';
+const DESCEND = 'descend';
+
 function getMultiplePriority<RecordType>(column: ColumnType<RecordType>): number | false {
   if (typeof column.sorter === 'object' && typeof column.sorter.multiple === 'number') {
     return column.sorter.multiple;
@@ -91,6 +96,8 @@ function injectSorter<RecordType>(
   sorterSates: SortState<RecordType>[],
   triggerSorter: (sorterSates: SortState<RecordType>) => void,
   defaultSortDirections: SortOrder[],
+  tableLocale?: TableLocale,
+  tableShowSorterTooltip?: boolean,
   pos?: string,
 ): ColumnsType<RecordType> {
   return (columns || []).map((column, index) => {
@@ -99,29 +106,40 @@ function injectSorter<RecordType>(
 
     if (newColumn.sorter) {
       const sortDirections: SortOrder[] = newColumn.sortDirections || defaultSortDirections;
+      const showSorterTooltip =
+        newColumn.showSorterTooltip === undefined
+          ? tableShowSorterTooltip
+          : newColumn.showSorterTooltip;
       const columnKey = getColumnKey(newColumn, columnPos);
       const sorterState = sorterSates.find(({ key }) => key === columnKey);
       const sorterOrder = sorterState ? sorterState.sortOrder : null;
-
+      const nextSortOrder = nextSortDirection(sortDirections, sorterOrder);
-      const upNode: React.ReactNode = sortDirections.includes('ascend') && (
+      const upNode: React.ReactNode = sortDirections.includes(ASCEND) && (
         <CaretUpOutlined
           className={classNames(`${prefixCls}-column-sorter-up`, {
-            active: sorterOrder === 'ascend',
+            active: sorterOrder === ASCEND,
           })}
         />
       );
-      const downNode: React.ReactNode = sortDirections.includes('descend') && (
+      const downNode: React.ReactNode = sortDirections.includes(DESCEND) && (
         <CaretDownOutlined
           className={classNames(`${prefixCls}-column-sorter-down`, {
-            active: sorterOrder === 'descend',
+            active: sorterOrder === DESCEND,
           })}
         />
       );
-
+      const { cancelSort, triggerAsc, triggerDesc } = tableLocale || {};
+      let sortTip: string | undefined = cancelSort;
+      if (nextSortOrder === DESCEND) {
+        sortTip = triggerDesc;
+      } else if (nextSortOrder === ASCEND) {
+        sortTip = triggerAsc;
+      }
       newColumn = {
         ...newColumn,
         className: classNames(newColumn.className, { [`${prefixCls}-column-sort`]: sorterOrder }),
-        title: (renderProps: ColumnTitleProps<RecordType>) => (
+        title: (renderProps: ColumnTitleProps<RecordType>) => {
+          const renderSortTitle = (
             <div className={`${prefixCls}-column-sorters`}>
               <span>{renderColumnTitle(column.title, renderProps)}</span>
               <span
@@ -135,17 +153,22 @@ function injectSorter<RecordType>(
                 </span>
               </span>
             </div>
-        ),
+          );
+          return showSorterTooltip ? (
+            <Tooltip title={sortTip}>{renderSortTitle}</Tooltip>
+          ) : (
+            renderSortTitle
+          );
+        },
         onHeaderCell: col => {
           const cell: React.HTMLAttributes<HTMLElement> =
             (column.onHeaderCell && column.onHeaderCell(col)) || {};
           const originOnClick = cell.onClick;
-
           cell.onClick = (event: React.MouseEvent<HTMLElement>) => {
             triggerSorter({
               column,
               key: columnKey,
-              sortOrder: nextSortDirection(sortDirections, sorterOrder),
+              sortOrder: nextSortOrder,
               multiplePriority: getMultiplePriority(column),
             });
 
@@ -170,6 +193,8 @@ function injectSorter<RecordType>(
           sorterSates,
           triggerSorter,
           defaultSortDirections,
+          tableLocale,
+          tableShowSorterTooltip,
           columnPos,
         ),
       };
@@ -240,7 +265,7 @@ export function getSortData<RecordType>(
           const compareResult = compareFn(record1, record2, sortOrder);
 
           if (compareResult !== 0) {
-            return sortOrder === 'ascend' ? compareResult : -compareResult;
+            return sortOrder === ASCEND ? compareResult : -compareResult;
           }
         }
       }
@@ -268,6 +293,8 @@ interface SorterConfig<RecordType> {
     sortStates: SortState<RecordType>[],
   ) => void;
   sortDirections: SortOrder[];
+  tableLocale?: TableLocale;
+  showSorterTooltip?: boolean;
 }
 
 export default function useFilterSorter<RecordType>({
@@ -276,6 +303,8 @@ export default function useFilterSorter<RecordType>({
   children,
   onSorterChange,
   sortDirections,
+  tableLocale,
+  showSorterTooltip,
 }: SorterConfig<RecordType>): [
   TransformColumns<RecordType>,
   SortState<RecordType>[],
@@ -371,7 +400,15 @@ export default function useFilterSorter<RecordType>({
   }
 
   const transformColumns = (innerColumns: ColumnsType<RecordType>) =>
-    injectSorter(prefixCls, innerColumns, mergedSorterStates, triggerSorter, sortDirections);
+    injectSorter(
+      prefixCls,
+      innerColumns,
+      mergedSorterStates,
+      triggerSorter,
+      sortDirections,
+      tableLocale,
+      showSorterTooltip,
+    );
 
   const getSorters = () => {
     return generateSorterInfo(mergedSorterStates);

components/table/index.en-US.md

@@ -82,6 +82,7 @@ const columns = [
 | onRow | Set props on per row | Function(record, index) | - |
 | getPopupContainer | the render container of dropdowns in table | (triggerNode) => HTMLElement | `() => TableHtmlElement` |
 | sortDirections | supported sort way, could be `'ascend'`, `'descend'` | Array | `['ascend', 'descend']` |
+| showSorterTooltip | header show next sorter direction tooltip | boolean | `true` |
 
 #### onRow usage
 
@@ -138,6 +139,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
 | onFilter | Callback executed when the confirm filter button is clicked | Function | - |
 | onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - |
 | onHeaderCell | Set props on per header cell | Function(column) | - |
+| showSorterTooltip | header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean | `true` |
 
 ### ColumnGroup
 
@@ -178,20 +180,21 @@ Properties for expandable.
 
 Properties for row selection.
 
-| Property | Description | Type | Default |
+| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
-| columnWidth | Set the width of the selection column | string\|number | `60px` |
+| columnWidth | Set the width of the selection column | string\|number | `60px` | 4.0 |
-| columnTitle | Set the title of the selection column | string\|React.ReactNode | - |
+| columnTitle | Set the title of the selection column | string\|React.ReactNode | - | 4.0 |
-| fixed | Fixed selection column on the left | boolean | - |
+| fixed | Fixed selection column on the left | boolean | - | 4.0 |
-| getCheckboxProps | Get Checkbox or Radio props | Function(record) | - |
+| getCheckboxProps | Get Checkbox or Radio props | Function(record) | - | 4.0 |
-| hideDefaultSelections | Remove the default `Select All` and `Select Invert` selections when [custom selection](#components-table-demo-row-selection-custom) | boolean | `false` |
+| hideDefaultSelections | Remove the default `Select All` and `Select Invert` selections when [custom selection](#components-table-demo-row-selection-custom) | boolean | `false` | 4.0 |
-| selectedRowKeys | Controlled selected row keys | string\[]\|number[] | \[] |
+| renderCell | Renderer of the table cell. Same as `render` in column | Function(checked, record, index, originNode) {} | - | 4.1 |
-| selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object\[]\|boolean | - |
+| selectedRowKeys | Controlled selected row keys | string\[]\|number[] | \[] | 4.0 |
-| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` |
+| selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object\[]\|boolean | - | 4.0 |
-| onChange | Callback executed when selected rows change | Function(selectedRowKeys, selectedRows) | - |
+| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` | 4.0 |
-| onSelect | Callback executed when select/deselect one row | Function(record, selected, selectedRows, nativeEvent) | - |
+| onChange | Callback executed when selected rows change | Function(selectedRowKeys, selectedRows) | - | 4.0 |
-| onSelectAll | Callback executed when select/deselect all rows | Function(selected, selectedRows, changeRows) | - |
+| onSelect | Callback executed when select/deselect one row | Function(record, selected, selectedRows, nativeEvent) | - | 4.0 |
-| onSelectInvert | Callback executed when row selection is inverted | Function(selectedRows) | - |
+| onSelectAll | Callback executed when select/deselect all rows | Function(selected, selectedRows, changeRows) | - | 4.0 |
+| onSelectInvert | Callback executed when row selection is inverted | Function(selectedRows) | - | 4.0 |
 
 ### scroll