Merge pull request #22381 from ant-design/master

chore: 🔀 merge master into feature

.eslintrc.js

@@ -20,7 +20,7 @@ const eslintrc = {
     },
   },
   parser: '@typescript-eslint/parser',
-  plugins: ['markdown', 'react', 'babel', 'jest', '@typescript-eslint'],
+  plugins: ['markdown', 'react', 'babel', 'jest', '@typescript-eslint', 'react-hooks'],
   // https://github.com/typescript-eslint/typescript-eslint/issues/46#issuecomment-470486034
   overrides: [
     {
@@ -90,6 +90,7 @@ const eslintrc = {
     'react/static-property-placement': 0,
     'jest/no-test-callback': 0,
     'jest/expect-expect': 0,
+    'react-hooks/rules-of-hooks': 2, // Checks rules of Hooks
   },
   globals: {
     gtag: true,

components/alert/style/index.less

@@ -11,33 +11,18 @@
   word-wrap: break-word;
   border-radius: @border-radius-base;
 
-  &-rtl {
-    padding: 8px 37px 8px 15px;
-    direction: rtl;
-  }
-
   &&-no-icon {
     padding: 8px 15px;
   }
 
   &&-closable {
     padding-right: 30px;
-
-    .@{alert-prefix-cls}-rtl& {
-      padding-right: 15px;
-      padding-left: 30px;
-    }
   }
 
   &-icon {
     position: absolute;
     top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
     left: 16px;
-
-    .@{alert-prefix-cls}-rtl & {
-      right: 16px;
-      left: auto;
-    }
   }
 
   &-description {
@@ -97,11 +82,6 @@
     outline: none;
     cursor: pointer;
 
-    .@{alert-prefix-cls}-rtl & {
-      right: auto;
-      left: 16px;
-    }
-
     .@{iconfont-css-prefix}-close {
       color: @alert-close-color;
       transition: color 0.3s;
@@ -125,10 +105,6 @@
     color: @alert-text-color;
     line-height: @line-height-base;
     border-radius: @border-radius-base;
-
-    .@{alert-prefix-cls}-rtl& {
-      padding: 15px 64px 15px 15px;
-    }
   }
 
   &-with-description&-no-icon {
@@ -140,11 +116,6 @@
     top: 16px;
     left: 24px;
     font-size: 24px;
-
-    .@{alert-prefix-cls}-rtl& {
-      right: 24px;
-      left: auto;
-    }
   }
 
   &-with-description &-close-icon {
@@ -153,11 +124,6 @@
     right: 16px;
     font-size: @font-size-base;
     cursor: pointer;
-
-    .@{alert-prefix-cls}-rtl& {
-      right: auto;
-      left: 16px;
-    }
   }
 
   &-with-description &-message {
@@ -221,3 +187,5 @@
     opacity: 0;
   }
 }
+
+@import './rtl.less';

components/alert/style/rtl.less

@@ -0,0 +1,58 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@alert-prefix-cls: ~'@{ant-prefix}-alert';
+
+.@{alert-prefix-cls} {
+  &-rtl {
+    padding: 8px 37px 8px 15px;
+    direction: rtl;
+  }
+
+  &&-closable {
+    .@{alert-prefix-cls}-rtl& {
+      padding-right: 15px;
+      padding-left: 30px;
+    }
+  }
+
+  &-icon {
+    .@{alert-prefix-cls}-rtl & {
+      right: 16px;
+      left: auto;
+    }
+  }
+
+  &-close-icon {
+    .@{alert-prefix-cls}-rtl & {
+      right: auto;
+      left: 16px;
+    }
+  }
+
+  &-with-description {
+    .@{alert-prefix-cls}-rtl& {
+      padding: 15px 64px 15px 15px;
+    }
+  }
+
+  &-with-description&-no-icon {
+    .@{alert-prefix-cls}-rtl& {
+      padding: 15px;
+    }
+  }
+
+  &-with-description &-icon {
+    .@{alert-prefix-cls}-rtl& {
+      right: 24px;
+      left: auto;
+    }
+  }
+
+  &-with-description &-close-icon {
+    .@{alert-prefix-cls}-rtl& {
+      right: auto;
+      left: 16px;
+    }
+  }
+}

components/auto-complete/style/index.less

@@ -8,4 +8,9 @@
 
 .@{autocomplete-prefix-cls} {
   .reset-component;
+
+  // https://github.com/ant-design/ant-design/issues/22302
+  .@{select-prefix-cls}-clear {
+    right: 13px;
+  } 
 }

components/badge/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './rtl';
 
 @badge-prefix-cls: ~'@{ant-prefix}-badge';
 @number-prefix-cls: ~'@{ant-prefix}-scroll-number';
@@ -12,10 +13,6 @@
   color: unset;
   line-height: 1;
 
-  &-rtl {
-    direction: rtl;
-  }
-
   &-count {
     z-index: @zindex-badge;
     min-width: @badge-height;
@@ -57,20 +54,6 @@
     right: 0;
     transform: translate(50%, -50%);
     transform-origin: 100% 0%;
-
-    .@{badge-prefix-cls}-rtl & {
-      right: auto;
-      left: 0;
-      transform: translate(-50%, -50%);
-      transform-origin: 0% 0%;
-    }
-  }
-
-  .@{badge-prefix-cls}-rtl& .@{number-prefix-cls}-custom-component {
-    right: auto;
-    left: 0;
-    transform: translate(-50%, -50%);
-    transform-origin: 0% 0%;
   }
 
   &-status {
@@ -129,11 +112,6 @@
       margin-left: 8px;
       color: @text-color;
       font-size: @font-size-base;
-
-      .@{badge-prefix-cls}-rtl & {
-        margin-right: 8px;
-        margin-left: 0;
-      }
     }
   }
 
@@ -141,19 +119,11 @@
   &-zoom-enter {
     animation: antZoomBadgeIn 0.3s @ease-out-back;
     animation-fill-mode: both;
-
-    .@{badge-prefix-cls}-rtl & {
-      animation-name: antZoomBadgeInRtl;
-    }
   }
 
   &-zoom-leave {
     animation: antZoomBadgeOut 0.3s @ease-in-back;
     animation-fill-mode: both;
-
-    .@{badge-prefix-cls}-rtl & {
-      animation-name: antZoomBadgeOutRtl;
-    }
   }
 
   &-not-a-wrapper {
@@ -220,23 +190,3 @@
     opacity: 0;
   }
 }
-
-@keyframes antZoomBadgeInRtl {
-  0% {
-    transform: scale(0) translate(-50%, -50%);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1) translate(-50%, -50%);
-  }
-}
-
-@keyframes antZoomBadgeOutRtl {
-  0% {
-    transform: scale(1) translate(-50%, -50%);
-  }
-  100% {
-    transform: scale(0) translate(-50%, -50%);
-    opacity: 0;
-  }
-}

components/badge/style/rtl.less

@@ -0,0 +1,71 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@badge-prefix-cls: ~'@{ant-prefix}-badge';
+@number-prefix-cls: ~'@{ant-prefix}-scroll-number';
+
+.@{badge-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-count,
+  &-dot,
+  .@{number-prefix-cls}-custom-component {
+    .@{badge-prefix-cls}-rtl & {
+      right: auto;
+      left: 0;
+      transform: translate(-50%, -50%);
+      transform-origin: 0% 0%;
+    }
+  }
+
+  .@{badge-prefix-cls}-rtl& .@{number-prefix-cls}-custom-component {
+    right: auto;
+    left: 0;
+    transform: translate(-50%, -50%);
+    transform-origin: 0% 0%;
+  }
+
+  &-status {
+    &-text {
+      .@{badge-prefix-cls}-rtl & {
+        margin-right: 8px;
+        margin-left: 0;
+      }
+    }
+  }
+
+  &-zoom-appear,
+  &-zoom-enter {
+    .@{badge-prefix-cls}-rtl & {
+      animation-name: antZoomBadgeInRtl;
+    }
+  }
+
+  &-zoom-leave {
+    .@{badge-prefix-cls}-rtl & {
+      animation-name: antZoomBadgeOutRtl;
+    }
+  }
+}
+
+@keyframes antZoomBadgeInRtl {
+  0% {
+    transform: scale(0) translate(-50%, -50%);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1) translate(-50%, -50%);
+  }
+}
+
+@keyframes antZoomBadgeOutRtl {
+  0% {
+    transform: scale(1) translate(-50%, -50%);
+  }
+  100% {
+    transform: scale(0) translate(-50%, -50%);
+    opacity: 0;
+  }
+}

components/carousel/style/index.less

@@ -1,15 +1,12 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './rtl';
 
 @carousel-prefix-cls: ~'@{ant-prefix}-carousel';
 
 .@{carousel-prefix-cls} {
   .reset-component;
 
-  &-rtl {
-    direction: rtl;
-  }
-
   .slick-slider {
     position: relative;
     display: block;
@@ -53,11 +50,6 @@
     left: 0;
     display: block;
 
-    .@{carousel-prefix-cls}-rtl & {
-      right: 0;
-      left: auto;
-    }
-
     &::before,
     &::after {
       display: table;
@@ -144,15 +136,6 @@
     &::before {
       content: '←';
     }
-
-    .@{carousel-prefix-cls}-rtl & {
-      right: -25px;
-      left: auto;
-
-      &::before {
-        content: '→';
-      }
-    }
   }
 
   .slick-next {
@@ -160,14 +143,6 @@
     &::before {
       content: '→';
     }
-
-    .@{carousel-prefix-cls}-rtl & {
-      right: auto;
-      left: -25px;
-      &::before {
-        content: '←';
-      }
-    }
   }
 
   // Dots
@@ -184,10 +159,6 @@
     padding-left: 0;
     list-style: none;
 
-    .@{carousel-prefix-cls}-rtl& {
-      flex-direction: row-reverse;
-    }
-
     &-bottom {
       bottom: 12px;
     }
@@ -253,10 +224,6 @@
     margin: 0;
     transform: translateY(-50%);
 
-    .@{carousel-prefix-cls}-rtl& {
-      flex-direction: column;
-    }
-
     &-left {
       right: auto;
       left: 12px;

components/carousel/style/rtl.less

@@ -0,0 +1,52 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@carousel-prefix-cls: ~'@{ant-prefix}-carousel';
+
+.@{carousel-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  .slick-track {
+    .@{carousel-prefix-cls}-rtl & {
+      right: 0;
+      left: auto;
+    }
+  }
+
+  .slick-prev {
+    .@{carousel-prefix-cls}-rtl & {
+      right: -25px;
+      left: auto;
+      &::before {
+        content: '→';
+      }
+    }
+  }
+
+  .slick-next {
+    .@{carousel-prefix-cls}-rtl & {
+      right: auto;
+      left: -25px;
+      &::before {
+        content: '←';
+      }
+    }
+  }
+
+  // Dots
+  .slick-dots {
+    .@{carousel-prefix-cls}-rtl& {
+      flex-direction: row-reverse;
+    }
+  }
+}
+
+.@{ant-prefix}-carousel-vertical {
+  .slick-dots {
+    .@{carousel-prefix-cls}-rtl& {
+      flex-direction: column;
+    }
+  }
+}

components/cascader/style/index.less

@@ -230,3 +230,5 @@
     }
   }
 }
+
+@import './rtl';

components/cascader/style/index.tsx

@@ -1,6 +1,5 @@
 import '../../style/index.less';
 import './index.less';
-import './rtl.less';
 
 // style dependencies
 import '../../empty/style';

components/collapse/Collapse.tsx

@@ -40,7 +40,6 @@ export default class Collapse extends React.Component<CollapseProps, any> {
 
   static defaultProps = {
     bordered: true,
-    openAnimation: { ...animation, appear() {} },
     expandIconPosition: 'left',
   };
 
@@ -75,8 +74,11 @@ export default class Collapse extends React.Component<CollapseProps, any> {
       },
       className,
     );
+    const openAnimation = { ...animation, appear() {} };
+
     return (
       <RcCollapse
+        openAnimation={openAnimation}
         {...this.props}
         expandIcon={(panelProps: PanelProps) => this.renderExpandIcon(panelProps, prefixCls)}
         prefixCls={prefixCls}

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

@@ -1,5 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Collapse could override default openAnimation 1`] = `
+<div
+  class="ant-collapse ant-collapse-icon-position-left"
+>
+  <div
+    class="ant-collapse-item ant-collapse-item-active"
+  >
+    <div
+      aria-expanded="true"
+      class="ant-collapse-header"
+      role="button"
+      tabindex="0"
+    >
+      <span
+        aria-label="right"
+        class="anticon anticon-right ant-collapse-arrow"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="right"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          style="transform: rotate(90deg);"
+          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>
+      This is panel header 1
+    </div>
+    <div
+      class="ant-collapse-content ant-collapse-content-active"
+    >
+      <div
+        class="ant-collapse-content-box"
+      >
+        content
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Collapse rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
   class="ant-collapse ant-collapse-icon-position-left ant-collapse-rtl"

components/collapse/__tests__/index.test.js

@@ -74,4 +74,19 @@ describe('Collapse', () => {
     expect(wrapper.find('.ant-collapse-item').hasClass('ant-collapse-item-active')).toBe(true);
     jest.useRealTimers();
   });
+
+  it('could override default openAnimation', () => {
+    const wrapper = mount(
+      <Collapse openAnimation={{}}>
+        <Collapse.Panel header="This is panel header 1" key="1">
+          content
+        </Collapse.Panel>
+      </Collapse>,
+    );
+    wrapper
+      .find('.ant-collapse-header')
+      .at(0)
+      .simulate('click');
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

components/collapse/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './rtl';
 
 @collapse-prefix-cls: ~'@{ant-prefix}-collapse';
 
@@ -11,10 +12,6 @@
   border-bottom: 0;
   border-radius: @collapse-panel-border-radius;
 
-  &-rtl {
-    direction: rtl;
-  }
-
   & > &-item {
     border-bottom: @border-width-base @border-style-base @border-color-base;
 
@@ -35,11 +32,6 @@
       transition: all 0.3s;
       .clearfix;
 
-      .@{collapse-prefix-cls}-rtl & {
-        padding: @collapse-header-padding;
-        padding-right: @collapse-header-padding-extra;
-      }
-
       .@{collapse-prefix-cls}-arrow {
         .iconfont-mixin();
 
@@ -52,19 +44,11 @@
 
         & svg {
           transition: transform 0.24s;
-
-          .@{collapse-prefix-cls}-rtl& {
-            transform: rotate(180deg);
-          }
         }
       }
 
       .@{collapse-prefix-cls}-extra {
         float: right;
-
-        .@{collapse-prefix-cls}-rtl& {
-          float: left;
-        }
       }
 
       &:focus {
@@ -75,11 +59,6 @@
     &.@{collapse-prefix-cls}-no-arrow {
       > .@{collapse-prefix-cls}-header {
         padding-left: 12px;
-
-        .@{collapse-prefix-cls}-rtl& {
-          padding-right: 12px;
-          padding-left: 0;
-        }
       }
     }
   }

components/collapse/style/rtl.less

@@ -0,0 +1,42 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@collapse-prefix-cls: ~'@{ant-prefix}-collapse';
+
+.@{collapse-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  & > &-item {
+    > .@{collapse-prefix-cls}-header {
+      .@{collapse-prefix-cls}-rtl & {
+        padding: @collapse-header-padding;
+        padding-right: @collapse-header-padding-extra;
+      }
+
+      .@{collapse-prefix-cls}-arrow {
+        & svg {
+          .@{collapse-prefix-cls}-rtl& {
+            transform: rotate(180deg);
+          }
+        }
+      }
+
+      .@{collapse-prefix-cls}-extra {
+        .@{collapse-prefix-cls}-rtl& {
+          float: left;
+        }
+      }
+    }
+
+    &.@{collapse-prefix-cls}-no-arrow {
+      > .@{collapse-prefix-cls}-header {
+        .@{collapse-prefix-cls}-rtl& {
+          padding-right: 12px;
+          padding-left: 0;
+        }
+      }
+    }
+  }
+}

components/comment/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './rtl';
 
 @comment-prefix-cls: ~'@{ant-prefix}-comment';
 
@@ -7,10 +8,6 @@
   position: relative;
   background-color: @comment-bg;
 
-  &-rtl {
-    direction: rtl;
-  }
-
   &-inner {
     display: flex;
     padding: @comment-padding-base;
@@ -22,10 +19,6 @@
     margin-right: 12px;
     cursor: pointer;
 
-    .@{comment-prefix-cls}-rtl & {
-      margin-right: 0;
-      margin-left: 12px;
-    }
     img {
       width: 32px;
       height: 32px;
@@ -51,11 +44,6 @@
         padding-right: 8px;
         font-size: @comment-font-size-sm;
         line-height: 18px;
-
-        .@{comment-prefix-cls}-rtl & {
-          padding-right: 0;
-          padding-left: 8px;
-        }
       }
 
       &-name {
@@ -86,9 +74,6 @@
     margin-top: 12px;
     padding-left: 0;
 
-    .@{comment-prefix-cls}-rtl & {
-      padding-right: 0;
-    }
     > li {
       display: inline-block;
       color: @comment-action-color;
@@ -100,11 +85,6 @@
         transition: color 0.3s;
         user-select: none;
 
-        .@{comment-prefix-cls}-rtl & {
-          padding-right: 0;
-          padding-left: 10px;
-        }
-
         &:hover {
           color: @comment-action-hover-color;
         }
@@ -114,10 +94,5 @@
 
   &-nested {
     margin-left: @comment-nest-indent;
-
-    .@{comment-prefix-cls}-rtl & {
-      margin-right: @comment-nest-indent;
-      margin-left: 0;
-    }
   }
 }

components/comment/style/rtl.less

@@ -0,0 +1,50 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@comment-prefix-cls: ~'@{ant-prefix}-comment';
+
+.@{comment-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-avatar {
+    .@{comment-prefix-cls}-rtl & {
+      margin-right: 0;
+      margin-left: 12px;
+    }
+  }
+
+  &-content {
+    &-author {
+      & > a,
+      & > span {
+        .@{comment-prefix-cls}-rtl & {
+          padding-right: 0;
+          padding-left: 8px;
+        }
+      }
+    }
+  }
+
+  &-actions {
+    .@{comment-prefix-cls}-rtl & {
+      padding-right: 0;
+    }
+    > li {
+      > span {
+        .@{comment-prefix-cls}-rtl & {
+          padding-right: 0;
+          padding-left: 10px;
+        }
+      }
+    }
+  }
+
+  &-nested {
+    .@{comment-prefix-cls}-rtl & {
+      margin-right: @comment-nest-indent;
+      margin-left: 0;
+    }
+  }
+}

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

@@ -1000,6 +1000,67 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
     </div>
   </div>
   <br />
+  <div
+    class="ant-picker ant-picker-range"
+  >
+    <div
+      class="ant-picker-input ant-picker-input-active"
+    >
+      <input
+        placeholder="Start date"
+        readonly=""
+        size="12"
+        value=""
+      />
+    </div>
+    <div
+      class="ant-picker-range-separator"
+    >
+      <span
+        class="ant-picker-separator"
+      >
+        →
+      </span>
+    </div>
+    <div
+      class="ant-picker-input"
+    >
+      <input
+        placeholder="End date"
+        readonly=""
+        size="12"
+        value=""
+      />
+    </div>
+    <div
+      class="ant-picker-active-bar"
+      style="left:0;width:0;position:absolute"
+    />
+    <span
+      class="ant-picker-suffix"
+    >
+      <span
+        aria-label="calendar"
+        class="anticon anticon-calendar"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="calendar"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
   <div
     class="ant-picker ant-picker-range"
   >
@@ -2142,6 +2203,70 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/date-picker/demo/select-in-range.md correctly 1`] = `
+<div
+  class="ant-picker ant-picker-range"
+>
+  <div
+    class="ant-picker-input ant-picker-input-active"
+  >
+    <input
+      placeholder="Start date"
+      readonly=""
+      size="12"
+      value=""
+    />
+  </div>
+  <div
+    class="ant-picker-range-separator"
+  >
+    <span
+      class="ant-picker-separator"
+    >
+      →
+    </span>
+  </div>
+  <div
+    class="ant-picker-input"
+  >
+    <input
+      placeholder="End date"
+      readonly=""
+      size="12"
+      value=""
+    />
+  </div>
+  <div
+    class="ant-picker-active-bar"
+    style="left:0;width:0;position:absolute"
+  />
+  <span
+    class="ant-picker-suffix"
+  >
+    <span
+      aria-label="calendar"
+      class="anticon anticon-calendar"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="calendar"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+        />
+      </svg>
+    </span>
+  </span>
+</div>
+`;
+
 exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
 <div>
   <div

components/date-picker/demo/disabled-date.md

@@ -66,6 +66,7 @@ ReactDOM.render(
     <br />
     <DatePicker picker="month" disabledDate={disabledDate} />
     <br />
+    <RangePicker disabledDate={disabledDate} />
     <RangePicker
       disabledDate={disabledDate}
       disabledTime={disabledRangeTime}

components/date-picker/demo/select-in-range.md

@@ -0,0 +1,44 @@
+---
+order: 6.1
+title:
+  zh-CN: 选择不超过七天的范围
+  en-US: Select range dates in 7 days
+---
+
+## zh-CN
+
+这里举例如何用 `onCalendarChange` 和 `disabledDate` 来限制动态的日期区间选择。
+
+## en-US
+
+A example shows how to select a dynamic range by using `onCalendarChange` and `disabledDate`.
+
+```jsx
+import React, { useState } from 'react';
+import { DatePicker } from 'antd';
+
+const { RangePicker } = DatePicker;
+
+const App = () => {
+  const [dates, setDates] = useState([]);
+  const disabledDate = current => {
+    if (!dates || dates.length === 0) {
+      return false;
+    }
+    const tooLate = dates[0] && current.diff(dates[0], 'days') > 7;
+    const tooEarly = dates[1] && dates[1].diff(current, 'days') > 7;
+    return tooEarly || tooLate;
+  };
+
+  return (
+    <RangePicker
+      disabledDate={disabledDate}
+      onCalendarChange={value => {
+        setDates(value);
+      }}
+    />
+  );
+};
+
+ReactDOM.render(<App />, mountNode);
+```

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

@@ -63,7 +63,7 @@ The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicke
 | bordered | whether has border style | Boolean | true |  |
 | suffixIcon | The custom suffix icon | ReactNode | - |  |
 | style | to customize the style of the input box | object | {} |  |
-| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |  |
+| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - |  |
 | onPanelChange | callback when picker panel mode is changed | function(value, mode) | - |  |
 | inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false |  |
 

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

@@ -65,7 +65,7 @@ import 'moment/locale/zh-cn';
 | bordered | 是否有边框 | Boolean | true |  |
 | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
 | style | 自定义输入框样式 | object | {} |  |
-| onOpenChange | 弹出日历和关闭日历的回调 | function(status) | 无 |  |
+| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | 无 |  |
 | onPanelChange | 日历面板切换的回调 | function(value, mode) | - |  |
 | inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |  |
 

components/descriptions/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/default';
 @import '../../style/mixins/index';
+@import './rtl';
 
 @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
 
@@ -8,10 +9,6 @@
 @descriptions-small-padding: 8px 16px;
 
 .@{descriptions-prefix-cls} {
-  &-rtl {
-    direction: rtl;
-  }
-
   &-title {
     margin-bottom: 20px;
     color: @heading-color;
@@ -52,10 +49,6 @@
       top: -0.5px;
       margin: 0 8px 0 2px;
       content: ' ';
-
-      .@{descriptions-prefix-cls}-rtl & {
-        margin: 0 2px 0 8px;
-      }
     }
   }
 

components/descriptions/style/rtl.less

@@ -0,0 +1,18 @@
+@import '../../style/themes/default';
+@import '../../style/mixins/index';
+
+@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
+
+.@{descriptions-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-item-label {
+    &::after {
+      .@{descriptions-prefix-cls}-rtl & {
+        margin: 0 2px 0 8px;
+      }
+    }
+  }
+}

components/drawer/style/drawer.less

@@ -15,10 +15,6 @@
       box-shadow @animation-duration-slow @ease-base-out;
   }
 
-  &-rtl {
-    direction: rtl;
-  }
-
   &-content-wrapper {
     position: absolute;
   }
@@ -179,11 +175,6 @@
     transition: color @animation-duration-slow;
     text-rendering: auto;
 
-    .@{drawer-prefix-cls}-rtl & {
-      right: auto;
-      left: 0;
-    }
-
     &:focus,
     &:hover {
       color: @icon-color-hover;

components/drawer/style/index.tsx

@@ -1,3 +1,4 @@
 // deps-lint-skip: empty
 import '../../style/index.less';
 import './index.less';
+import './rtl.less';

components/drawer/style/rtl.less

@@ -0,0 +1,16 @@
+@import '../../style/themes/index';
+
+@drawer-prefix-cls: ~'@{ant-prefix}-drawer';
+
+.@{drawer-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-close {
+    .@{drawer-prefix-cls}-rtl & {
+      right: auto;
+      left: 0;
+    }
+  }
+}

components/empty/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './rtl';
 
 @empty-prefix-cls: ~'@{ant-prefix}-empty';
 @empty-img-prefix-cls: ~'@{ant-prefix}-empty-img';
@@ -10,10 +11,6 @@
   line-height: 22px;
   text-align: center;
 
-  &-rtl {
-    direction: rtl;
-  }
-
   &-image {
     height: 100px;
     margin-bottom: 8px;

components/empty/style/rtl.less

@@ -0,0 +1,10 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@empty-prefix-cls: ~'@{ant-prefix}-empty';
+
+.@{empty-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+}

components/form/v3.en-US.md

@@ -276,7 +276,7 @@ To
 
 ```jsx
 // antd v4
-<Form.Item name={['user', '0', 'firstname']} label="Firstname">
+<Form.Item name={['user', 0, 'firstname']} label="Firstname">
   <Input />
 </Form.Item>
 ```

components/form/v3.zh-CN.md

@@ -278,7 +278,7 @@ form.getFieldsError();
 
 ```jsx
 // antd v4
-<Form.Item name={['user', '0', 'firstname']} label="Firstname">
+<Form.Item name={['user', 0, 'firstname']} label="Firstname">
   <Input />
 </Form.Item>
 ```

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

@@ -284,7 +284,6 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
     <ul
       class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal"
       role="menu"
-      style="line-height:64px"
     >
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
@@ -1293,7 +1292,6 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
     <ul
       class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal"
       role="menu"
-      style="line-height:64px"
     >
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
@@ -1464,7 +1462,6 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
     <ul
       class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal"
       role="menu"
-      style="line-height:64px"
     >
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
@@ -1810,7 +1807,6 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
     <ul
       class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal"
       role="menu"
-      style="line-height:64px"
     >
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"

components/layout/demo/fixed.md

@@ -27,7 +27,6 @@ ReactDOM.render(
         theme="dark"
         mode="horizontal"
         defaultSelectedKeys={['2']}
-        style={{ lineHeight: '64px' }}
       >
         <Menu.Item key="1">nav 1</Menu.Item>
         <Menu.Item key="2">nav 2</Menu.Item>

components/layout/demo/top-side-2.md

@@ -28,7 +28,6 @@ ReactDOM.render(
         theme="dark"
         mode="horizontal"
         defaultSelectedKeys={['2']}
-        style={{ lineHeight: '64px' }}
       >
         <Menu.Item key="1">nav 1</Menu.Item>
         <Menu.Item key="2">nav 2</Menu.Item>

components/layout/demo/top-side.md

@@ -28,7 +28,6 @@ ReactDOM.render(
         theme="dark"
         mode="horizontal"
         defaultSelectedKeys={['2']}
-        style={{ lineHeight: '64px' }}
       >
         <Menu.Item key="1">nav 1</Menu.Item>
         <Menu.Item key="2">nav 2</Menu.Item>

components/layout/demo/top.md

@@ -32,7 +32,6 @@ ReactDOM.render(
         theme="dark"
         mode="horizontal"
         defaultSelectedKeys={['2']}
-        style={{ lineHeight: '64px' }}
       >
         <Menu.Item key="1">nav 1</Menu.Item>
         <Menu.Item key="2">nav 2</Menu.Item>

components/list/style/index.less

@@ -13,16 +13,6 @@
     outline: none;
   }
 
-  &-rtl {
-    direction: rtl;
-    text-align: right;
-
-    // fix for virtual scroll style attribute > (direction:ltr)
-    .ReactVirtualized__List .@{list-prefix-cls}-item {
-      direction: rtl;
-    }
-  }
-
   &-pagination {
     margin-top: 24px;
     text-align: right;
@@ -31,10 +21,6 @@
     .@{ant-prefix}-pagination-options {
       text-align: left;
     }
-
-    .@{list-prefix-cls}-rtl & {
-      text-align: left;
-    }
   }
 
   &-more {
@@ -82,11 +68,6 @@
 
       &-avatar {
         margin-right: @list-item-meta-avatar-margin-right;
-
-        .@{list-prefix-cls}-rtl & {
-          margin-right: 0;
-          margin-left: @list-item-meta-avatar-margin-right;
-        }
       }
       &-content {
         flex: 1 0;
@@ -117,11 +98,6 @@
       font-size: 0;
       list-style: none;
 
-      .@{list-prefix-cls}-rtl & {
-        margin-right: 48px;
-        margin-left: 0;
-      }
-
       & > li {
         position: relative;
         display: inline-block;
@@ -134,11 +110,6 @@
       }
       & > li:first-child {
         padding-left: 0;
-
-        .@{list-prefix-cls}-rtl & {
-          padding-right: 0;
-          padding-left: 8px;
-        }
       }
       &-split {
         position: absolute;
@@ -148,11 +119,6 @@
         height: 14px;
         margin-top: -7px;
         background-color: @border-color-split;
-
-        .@{list-prefix-cls}-rtl & {
-          right: auto;
-          left: 0;
-        }
       }
     }
   }
@@ -217,11 +183,6 @@
 
     &-extra {
       margin-left: 40px;
-
-      .@{list-prefix-cls}-rtl& {
-        margin-right: 40px;
-        margin-left: 0;
-      }
     }
 
     &-meta {
@@ -239,19 +200,10 @@
       margin-top: @padding-md;
       margin-left: auto;
 
-      .@{list-prefix-cls}-rtl & {
-        margin-right: auto;
-      }
-
       > li {
         padding: 0 16px;
         &:first-child {
           padding-left: 0;
-
-          .@{list-prefix-cls}-rtl & {
-            padding-right: 0;
-            padding-left: 16px;
-          }
         }
       }
     }
@@ -276,10 +228,6 @@
     .@{list-prefix-cls}-item-no-flex {
       .@{list-prefix-cls}-item-action {
         float: right;
-
-        .@{list-prefix-cls}-rtl & {
-          float: left;
-        }
       }
     }
   }
@@ -287,3 +235,4 @@
 
 @import './bordered';
 @import './responsive';
+@import './rtl.less';

components/list/style/responsive.less

@@ -3,11 +3,6 @@
     &-item {
       &-action {
         margin-left: 24px;
-
-        .@{list-prefix-cls}-rtl & {
-          margin-right: 24px;
-          margin-left: 0;
-        }
       }
     }
   }
@@ -16,11 +11,6 @@
     .@{list-prefix-cls}-item {
       &-extra {
         margin-left: 24px;
-
-        .@{list-prefix-cls}-rtl & {
-          margin-right: 24px;
-          margin-left: 0;
-        }
       }
     }
   }
@@ -32,11 +22,6 @@
       flex-wrap: wrap;
       &-action {
         margin-left: 12px;
-
-        .@{list-prefix-cls}-rtl & {
-          margin-right: 22px;
-          margin-left: 0;
-        }
       }
     }
   }
@@ -49,12 +34,9 @@
       }
       &-extra {
         margin: auto auto 16px;
-
-        // to override margins on rtl view
-        .@{list-prefix-cls}-rtl& {
-          margin: auto auto 16px;
-        }
       }
     }
   }
 }
+
+@import './responsive.rtl.less';

components/list/style/responsive.rtl.less

@@ -0,0 +1,47 @@
+@media screen and (max-width: @screen-md) {
+  .@{list-prefix-cls} {
+    &-item {
+      &-action {
+        .@{list-prefix-cls}-rtl & {
+          margin-right: 24px;
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .@{list-prefix-cls}-vertical {
+    .@{list-prefix-cls}-item {
+      &-extra {
+        .@{list-prefix-cls}-rtl & {
+          margin-right: 24px;
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .@{list-prefix-cls} {
+    &-item {
+      &-action {
+        .@{list-prefix-cls}-rtl & {
+          margin-right: 22px;
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .@{list-prefix-cls}-vertical {
+    .@{list-prefix-cls}-item {
+      &-extra {
+        // to override margins on rtl view
+        .@{list-prefix-cls}-rtl& {
+          margin: auto auto 16px;
+        }
+      }
+    }
+  }
+}

components/list/style/rtl.less

@@ -0,0 +1,90 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import './customize.less';
+
+@list-prefix-cls: ~'@{ant-prefix}-list';
+
+.@{list-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+    text-align: right;
+
+    // fix for virtual scroll style attribute > (direction:ltr)
+    .ReactVirtualized__List .@{list-prefix-cls}-item {
+      direction: rtl;
+    }
+  }
+
+  &-pagination {
+    .@{list-prefix-cls}-rtl & {
+      text-align: left;
+    }
+  }
+
+  &-item {
+    &-meta {
+      &-avatar {
+        .@{list-prefix-cls}-rtl & {
+          margin-right: 0;
+          margin-left: @list-item-meta-avatar-margin-right;
+        }
+      }
+    }
+
+    &-action {
+      .@{list-prefix-cls}-rtl & {
+        margin-right: 48px;
+        margin-left: 0;
+      }
+
+      & > li:first-child {
+        .@{list-prefix-cls}-rtl & {
+          padding-right: 0;
+          padding-left: 8px;
+        }
+      }
+
+      &-split {
+        .@{list-prefix-cls}-rtl & {
+          right: auto;
+          left: 0;
+        }
+      }
+    }
+  }
+
+  &-vertical &-item {
+    &-extra {
+      .@{list-prefix-cls}-rtl& {
+        margin-right: 40px;
+        margin-left: 0;
+      }
+    }
+
+    &-action {
+      .@{list-prefix-cls}-rtl & {
+        margin-right: auto;
+      }
+
+      > li {
+        &:first-child {
+          .@{list-prefix-cls}-rtl & {
+            padding-right: 0;
+            padding-left: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  // Horizontal
+  &:not(.@{list-prefix-cls}-vertical) {
+    .@{list-prefix-cls}-item-no-flex {
+      .@{list-prefix-cls}-item-action {
+        .@{list-prefix-cls}-rtl & {
+          float: left;
+        }
+      }
+    }
+  }
+}

components/menu/style/index.less

@@ -550,4 +550,11 @@
   }
 }
 
+// Integration with header element so menu items have the same height
+.@{ant-prefix}-layout-header {
+  .@{menu-prefix-cls} {
+    line-height: inherit;
+  }
+}
+
 @import './dark';

components/modal/style/index.tsx

@@ -3,3 +3,5 @@ import './index.less';
 
 // style dependencies
 import '../../button/style';
+
+import './rtl.less';

components/modal/style/modal.less

@@ -1,6 +1,5 @@
 @dialog-prefix-cls: ~'@{ant-prefix}-modal';
 @table-prefix-cls: ~'@{ant-prefix}-table';
-@dialog-wrap-rtl-cls: ~'@{dialog-prefix-cls}-wrap-rtl';
 
 .@{dialog-prefix-cls} {
   .reset-component;
@@ -22,10 +21,6 @@
     overflow: auto;
     outline: 0;
     -webkit-overflow-scrolling: touch;
-
-    &-rtl {
-      direction: rtl;
-    }
   }
 
   &-title {
@@ -63,11 +58,6 @@
     cursor: pointer;
     transition: color 0.3s;
 
-    .@{dialog-wrap-rtl-cls} & {
-      right: initial;
-      left: 0;
-    }
-
     &-x {
       display: block;
       width: 56px;
@@ -109,17 +99,9 @@
     border-top: @border-width-base @border-style-base @modal-footer-border-color-split;
     border-radius: 0 0 @border-radius-base @border-radius-base;
 
-    .@{dialog-wrap-rtl-cls} & {
-      text-align: left;
-    }
     button + button {
       margin-bottom: 0;
       margin-left: 8px;
-
-      .@{dialog-wrap-rtl-cls} & {
-        margin-right: 8px;
-        margin-left: 0;
-      }
     }
   }
 
@@ -166,10 +148,6 @@
     display: inline-block;
     text-align: left;
     vertical-align: middle;
-
-    .@{dialog-wrap-rtl-cls}& {
-      text-align: right;
-    }
   }
 }
 

components/modal/style/rtl.less

@@ -0,0 +1,40 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@dialog-prefix-cls: ~'@{ant-prefix}-modal';
+@dialog-wrap-rtl-cls: ~'@{dialog-prefix-cls}-wrap-rtl';
+
+.@{dialog-prefix-cls} {
+  &-wrap {
+    &-rtl {
+      direction: rtl;
+    }
+  }
+
+  &-close {
+    .@{dialog-wrap-rtl-cls} & {
+      right: initial;
+      left: 0;
+    }
+  }
+
+  &-footer {
+    .@{dialog-wrap-rtl-cls} & {
+      text-align: left;
+    }
+    button + button {
+      .@{dialog-wrap-rtl-cls} & {
+        margin-right: 8px;
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.@{dialog-prefix-cls}-centered {
+  .@{dialog-prefix-cls} {
+    .@{dialog-wrap-rtl-cls}& {
+      text-align: right;
+    }
+  }
+}

components/page-header/__tests__/__snapshots__/demo.test.js.snap

@@ -647,32 +647,32 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
         </div>
         <div>
           <a
-            style="margin-right:16px"
+            class="example-link"
           >
             <img
               alt="Quick Start"
+              class="example-link-icon"
               src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
-              style="margin-right:8px"
             />
             Quick Start
           </a>
           <a
-            style="margin-right:16px"
+            class="example-link"
           >
             <img
               alt=" Product Info"
+              class="example-link-icon"
               src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg"
-              style="margin-right:8px"
             />
              Product Info
           </a>
           <a
-            style="margin-right:16px"
+            class="example-link"
           >
             <img
               alt="Product Doc"
+              class="example-link-icon"
               src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
-              style="margin-right:8px"
             />
             Product Doc
           </a>

components/page-header/demo/content.md

@@ -75,18 +75,8 @@ const routes = [
 ];
 
 const IconLink = ({ src, text }) => (
-  <a
+  <a className="example-link">
-    style={{
+    <img className="example-link-icon" src={src} alt={text} />
-      marginRight: 16,
-    }}
-  >
-    <img
-      style={{
-        marginRight: 8,
-      }}
-      src={src}
-      alt={text}
-    />
     {text}
   </a>
 );
@@ -168,6 +158,23 @@ ReactDOM.render(
   align-items: center;
 }
 
+#components-page-header-demo-content .example-link {
+  margin-right: 16px;
+}
+#components-page-header-demo-content .example-link-icon {
+  margin-right: 8px;
+}
+
+#components-page-header-demo-content .ant-page-header-rtl .example-link {
+  float: right;
+  margin-right: 0;
+  margin-left: 16px;
+}
+#components-page-header-demo-content .ant-page-header-rtl .example-link-icon {
+  margin-right: 0;
+  margin-left: 8px;
+}
+
 @media (max-width: 768px) {
   #components-page-header-demo-content .image {
     flex: 100%;

components/popover/style/index.less

@@ -22,11 +22,6 @@
     content: '';
   }
 
-  &-rtl {
-    direction: rtl;
-    text-align: right;
-  }
-
   &-hidden {
     display: none;
   }
@@ -99,11 +94,6 @@
     }
     &-title {
       padding-left: @font-size-base + 8px;
-
-      .@{popover-prefix-cls}-rtl & {
-        padding-right: @font-size-base + 8px;
-        padding-left: @padding-md;
-      }
     }
   }
 
@@ -111,17 +101,8 @@
     margin-bottom: 4px;
     text-align: right;
 
-    .@{popover-prefix-cls}-rtl & {
-      text-align: left;
-    }
-
     button {
       margin-left: 8px;
-
-      .@{popover-prefix-cls}-rtl & {
-        margin-right: 8px;
-        margin-left: 0;
-      }
     }
   }
 
@@ -223,3 +204,5 @@
     bottom: 12px;
   }
 }
+
+@import './rtl.less';

components/popover/style/rtl.less

@@ -0,0 +1,33 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@popover-prefix-cls: ~'@{ant-prefix}-popover';
+
+.@{popover-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+    text-align: right;
+  }
+
+  &-message {
+    &-title {
+      .@{popover-prefix-cls}-rtl & {
+        padding-right: @font-size-base + 8px;
+        padding-left: @padding-md;
+      }
+    }
+  }
+
+  &-buttons {
+    .@{popover-prefix-cls}-rtl & {
+      text-align: left;
+    }
+
+    button {
+      .@{popover-prefix-cls}-rtl & {
+        margin-right: 8px;
+        margin-left: 0;
+      }
+    }
+  }
+}

components/progress/style/index.less

@@ -8,10 +8,6 @@
 
   display: inline-block;
 
-  &-rtl {
-    direction: rtl;
-  }
-
   &-line {
     position: relative;
     width: 100%;
@@ -46,13 +42,6 @@
     .@{progress-prefix-cls}-show-info & {
       margin-right: ~'calc(-2em - 8px)';
       padding-right: ~'calc(2em + 8px)';
-
-      .@{progress-prefix-cls}-rtl& {
-        margin-right: 0;
-        margin-left: ~'calc(-2em - 8px)';
-        padding-right: 0;
-        padding-left: ~'calc(2em + 8px)';
-      }
     }
   }
 
@@ -93,11 +82,6 @@
     top: 0;
     left: 0;
     background-color: @success-color;
-
-    .@{progress-prefix-cls}-rtl & {
-      right: 0;
-      left: auto;
-    }
   }
 
   &-text {
@@ -114,12 +98,6 @@
     .@{iconfont-css-prefix} {
       font-size: @font-size-base;
     }
-
-    .@{progress-prefix-cls}-rtl & {
-      margin-right: 8px;
-      margin-left: 0;
-      text-align: right;
-    }
   }
 
   &-status-active {

components/progress/style/index.tsx

@@ -1,2 +1,3 @@
 import '../../style/index.less';
 import './index.less';
+import './rtl.less';

components/progress/style/rtl.less

@@ -0,0 +1,36 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@progress-prefix-cls: ~'@{ant-prefix}-progress';
+
+.@{progress-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-outer {
+    .@{progress-prefix-cls}-show-info & {
+      .@{progress-prefix-cls}-rtl& {
+        margin-right: 0;
+        margin-left: ~'calc(-2em - 8px)';
+        padding-right: 0;
+        padding-left: ~'calc(2em + 8px)';
+      }
+    }
+  }
+
+  &-success-bg {
+    .@{progress-prefix-cls}-rtl & {
+      right: 0;
+      left: auto;
+    }
+  }
+
+  &-text {
+    .@{progress-prefix-cls}-rtl & {
+      margin-right: 8px;
+      margin-left: 0;
+      text-align: right;
+    }
+  }
+}

components/result/style/index.less

@@ -22,10 +22,6 @@
     color: @warning-color;
   }
 
-  &-rtl {
-    direction: rtl;
-  }
-
   // Exception Status image
   &-image {
     width: 250px;
@@ -62,16 +58,8 @@
     > * {
       margin-right: 8px;
 
-      .@{result-prefix-cls}-rtl & {
-        margin-right: 0;
-        margin-left: 8px;
-      }
-
       &:last-child {
         margin-right: 0;
-        .@{result-prefix-cls}-rtl & {
-          margin-left: 8px;
-        }
       }
     }
   }

components/result/style/index.tsx

@@ -1,2 +1,3 @@
 import '../../style/index.less';
 import './index.less';
+import './rtl.less';

components/result/style/rtl.less

@@ -0,0 +1,25 @@
+@import '../../style/themes/default';
+@import '../../style/mixins/index';
+
+@result-prefix-cls: ~'@{ant-prefix}-result';
+
+.@{result-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-extra {
+    > * {
+      .@{result-prefix-cls}-rtl & {
+        margin-right: 0;
+        margin-left: 8px;
+      }
+
+      &:last-child {
+        .@{result-prefix-cls}-rtl & {
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+}

components/select/style/index.less

@@ -4,6 +4,7 @@
 
 @import './single';
 @import './multiple';
+@import './rtl';
 
 @select-prefix-cls: ~'@{ant-prefix}-select';
 @select-height-without-border: @input-height-base - 2 * @border-width-base;
@@ -60,10 +61,6 @@
     .hover();
   }
 
-  &-rtl {
-    direction: rtl;
-  }
-
   // ======================== Selection ========================
   &-selection-item {
     flex: 1;
@@ -110,11 +107,6 @@
         transform: rotate(180deg);
       }
     }
-
-    .@{select-prefix-cls}-rtl & {
-      right: initial;
-      left: @control-padding-horizontal - 1px;
-    }
   }
 
   // ========================== Clear ==========================
@@ -148,20 +140,11 @@
     .@{select-prefix-cls}:hover & {
       opacity: 1;
     }
-
-    .@{select-prefix-cls}-rtl & {
-      right: initial;
-      left: @control-padding-horizontal - 1px;
-    }
   }
 
   // ========================== Popup ==========================
   &-dropdown {
     .reset-component;
-
-    &-rtl {
-      direction: rtl;
-    }
     position: absolute;
     top: -9999px;
     left: -9999px;

components/select/style/multiple.less

@@ -1,4 +1,5 @@
 @import './index';
+@import './multiple.rtl.less';
 
 @select-multiple-item-border-width: 1px;
 @select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px
@@ -65,11 +66,6 @@
     transition: font-size 0.3s, line-height 0.3s, height 0.3s;
     user-select: none;
 
-    .@{select-prefix-cls}-rtl& {
-      margin-right: 0;
-      margin-left: @input-padding-vertical-base;
-      text-align: right;
-    }
     // It's ok not to do this, but 24px makes bottom narrow in view should adjust
     &-content {
       display: inline-block;
@@ -77,12 +73,6 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-
-      .@{select-prefix-cls}-rtl& {
-        margin-right: 0;
-        margin-left: @padding-xs / 2;
-        text-align: right;
-      }
     }
 
     &-remove {
@@ -106,11 +96,6 @@
     position: relative;
     margin-left: @select-multiple-padding / 2;
 
-    .@{select-prefix-cls}-rtl& {
-      margin-right: @select-multiple-padding / 2;
-      margin-left: @input-padding-vertical-base;
-    }
-
     &-input,
     &-mirror {
       font-family: @font-family;
@@ -129,11 +114,6 @@
       z-index: 999;
       white-space: nowrap;
       visibility: hidden;
-
-      .@{select-prefix-cls}-rtl& {
-        right: 0;
-        left: auto;
-      }
     }
   }
 
@@ -145,11 +125,6 @@
     left: @input-padding-horizontal;
     transform: translateY(-50%);
     transition: all 0.3s;
-
-    .@{select-prefix-cls}-rtl& {
-      right: @input-padding-horizontal;
-      left: auto;
-    }
   }
 
   // ============================================================
@@ -189,10 +164,6 @@
   &.@{select-prefix-cls}-sm {
     .@{select-prefix-cls}-selection-placeholder {
       left: @input-padding-horizontal-sm;
-
-      .@{select-prefix-cls}-rtl& {
-        right: @input-padding-horizontal-sm;
-      }
     }
   }
 }

components/select/style/multiple.rtl.less

@@ -0,0 +1,69 @@
+@import './index';
+
+@select-multiple-item-border-width: 1px;
+@select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2);
+@select-multiple-padding: max(
+  @input-padding-vertical-base - @select-multiple-item-border-width -
+    @select-multiple-item-spacing-half,
+  0
+);
+
+/**
+ * Do not merge `height` & `line-height` under style with `selection` & `search`,
+ * since chrome may update to redesign with its align logic.
+ */
+
+.@{select-prefix-cls}-multiple {
+  // ======================== Selections ========================
+  .@{select-prefix-cls}-selection-item {
+    .@{select-prefix-cls}-rtl& {
+      margin-right: 0;
+      margin-left: @input-padding-vertical-base;
+      text-align: right;
+    }
+    // It's ok not to do this, but 24px makes bottom narrow in view should adjust
+    &-content {
+      .@{select-prefix-cls}-rtl& {
+        margin-right: 0;
+        margin-left: @padding-xs / 2;
+        text-align: right;
+      }
+    }
+  }
+
+  // ========================== Input ==========================
+  .@{select-prefix-cls}-selection-search {
+    .@{select-prefix-cls}-rtl& {
+      margin-right: @select-multiple-padding / 2;
+      margin-left: @input-padding-vertical-base;
+    }
+
+    &-mirror {
+      .@{select-prefix-cls}-rtl& {
+        right: 0;
+        left: auto;
+      }
+    }
+  }
+
+  // ======================= Placeholder =======================
+  .@{select-prefix-cls}-selection-placeholder {
+    .@{select-prefix-cls}-rtl& {
+      right: @input-padding-horizontal;
+      left: auto;
+    }
+  }
+
+  // ============================================================
+  // ==                          Size                          ==
+  // ============================================================
+
+  // Size small need additional set padding
+  &.@{select-prefix-cls}-sm {
+    .@{select-prefix-cls}-selection-placeholder {
+      .@{select-prefix-cls}-rtl& {
+        right: @input-padding-horizontal-sm;
+      }
+    }
+  }
+}

components/select/style/rtl.less

@@ -0,0 +1,34 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import '../../input/style/mixin';
+
+@select-prefix-cls: ~'@{ant-prefix}-select';
+
+.@{select-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  // ========================== Arrow ==========================
+  &-arrow {
+    .@{select-prefix-cls}-rtl & {
+      right: initial;
+      left: @control-padding-horizontal - 1px;
+    }
+  }
+
+  // ========================== Clear ==========================
+  &-clear {
+    .@{select-prefix-cls}-rtl & {
+      right: initial;
+      left: @control-padding-horizontal - 1px;
+    }
+  }
+
+  // ========================== Popup ==========================
+  &-dropdown {
+    &-rtl {
+      direction: rtl;
+    }
+  }
+}

components/select/style/single.less

@@ -1,4 +1,5 @@
 @import './index';
+@import './single.rtl.less';
 
 @selection-item-padding: ceil(@font-size-base * 1.25);
 
@@ -32,11 +33,6 @@
           line-height: @select-height-without-border;
         }
       }
-      .@{select-prefix-cls}-rtl& {
-        right: 0;
-        left: 9px;
-        text-align: right;
-      }
     }
 
     // For common baseline align
@@ -55,21 +51,11 @@
   // With arrow should provides `padding-right` to show the arrow
   &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
     right: @input-padding-horizontal-base + @font-size-base;
-
-    .@{select-prefix-cls}-rtl& {
-      right: @input-padding-horizontal-base;
-      left: @input-padding-horizontal-base + @font-size-base;
-    }
   }
 
   &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
   &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
     padding-right: @selection-item-padding;
-
-    .@{select-prefix-cls}-rtl& {
-      padding-right: 0;
-      padding-left: @selection-item-padding;
-    }
   }
 
   // Opacity selection if open
@@ -90,9 +76,6 @@
       height: @input-height-base;
       padding: 0 @input-padding-horizontal-base;
 
-      .@{select-prefix-cls}-rtl& {
-        padding: 0 @input-padding-horizontal-base;
-      }
       .@{select-prefix-cls}-selection-search-input {
         height: @select-height-without-border;
       }
@@ -166,20 +149,11 @@
       // With arrow should provides `padding-right` to show the arrow
       &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
         right: @input-padding-horizontal-sm + @font-size-base * 1.5;
-
-        .@{select-prefix-cls}-rtl& {
-          right: 0;
-        }
       }
 
       &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
       &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
         padding-right: @font-size-base * 1.5;
-
-        .@{select-prefix-cls}-rtl& {
-          padding-right: 0;
-          padding-left: @font-size-base * 1.5;
-        }
       }
     }
   }

components/select/style/single.rtl.less

@@ -0,0 +1,69 @@
+@import './index';
+
+@selection-item-padding: ceil(@font-size-base * 1.25);
+
+.@{select-prefix-cls}-single {
+  // ========================= Selector =========================
+  .@{select-prefix-cls}-selector {
+    .@{select-prefix-cls}-selection-item,
+    .@{select-prefix-cls}-selection-placeholder {
+      .@{select-prefix-cls}-rtl& {
+        right: 0;
+        left: 9px;
+        text-align: right;
+      }
+    }
+  }
+
+  // With arrow should provides `padding-right` to show the arrow
+  &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
+    .@{select-prefix-cls}-rtl& {
+      right: @input-padding-horizontal-base;
+      left: @input-padding-horizontal-base + @font-size-base;
+    }
+  }
+
+  &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
+  &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
+    .@{select-prefix-cls}-rtl& {
+      padding-right: 0;
+      padding-left: @selection-item-padding;
+    }
+  }
+
+  // ========================== Input ==========================
+  // We only change the style of non-customize input which is only support by `combobox` mode.
+
+  // Not customize
+  &:not(.@{select-prefix-cls}-customize-input) {
+    .@{select-prefix-cls}-selector {
+      .@{select-prefix-cls}-rtl& {
+        padding: 0 @input-padding-horizontal-base;
+      }
+    }
+  }
+
+  // ============================================================
+  // ==                          Size                          ==
+  // ============================================================
+
+  // Size small need additional set padding
+  &.@{select-prefix-cls}-sm {
+    &:not(.@{select-prefix-cls}-customize-input) {
+      // With arrow should provides `padding-right` to show the arrow
+      &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
+        .@{select-prefix-cls}-rtl& {
+          right: 0;
+        }
+      }
+
+      &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
+      &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
+        .@{select-prefix-cls}-rtl& {
+          padding-right: 0;
+          padding-left: @font-size-base * 1.5;
+        }
+      }
+    }
+  }
+}

components/statistic/style/index.less

@@ -6,10 +6,6 @@
 .@{statistic-prefix-cls} {
   .reset-component;
 
-  &-rtl {
-    direction: rtl;
-  }
-
   &-title {
     margin-bottom: 4px;
     color: @text-color-secondary;
@@ -34,21 +30,13 @@
 
     &-prefix {
       margin-right: 4px;
-
-      .@{statistic-prefix-cls}-rtl & {
-        margin-right: 0;
-        margin-left: 4px;
-      }
     }
 
     &-suffix {
       margin-left: 4px;
       font-size: @statistic-unit-font-size;
-
-      .@{statistic-prefix-cls}-rtl & {
-        margin-right: 4px;
-        margin-left: 0;
-      }
     }
   }
 }
+
+@import './rtl.less';

components/statistic/style/rtl.less

@@ -0,0 +1,26 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@statistic-prefix-cls: ~'@{ant-prefix}-statistic';
+
+.@{statistic-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-content {
+    &-prefix {
+      .@{statistic-prefix-cls}-rtl & {
+        margin-right: 0;
+        margin-left: 4px;
+      }
+    }
+
+    &-suffix {
+      .@{statistic-prefix-cls}-rtl & {
+        margin-right: 4px;
+        margin-left: 0;
+      }
+    }
+  }
+}

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

@@ -1217,4 +1217,14 @@ describe('Table.filter', () => {
 
     expect(wrapper.find('.ant-table-filter-trigger').hasClass('active')).toBeTruthy();
   });
+
+  it('with onFilter', () => {
+    const onFilter = jest.fn((value, record) => record.key === value);
+    const columns = [{ dataIndex: 'key', filteredValue: [5], onFilter }];
+    const testData = [{ key: 1 }, { key: 3 }, { key: 5 }];
+    const wrapper = mount(<Table columns={columns} dataSource={testData} />);
+
+    expect(onFilter).toHaveBeenCalled();
+    expect(wrapper.find('tbody tr')).toHaveLength(1);
+  });
 });

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -24,10 +24,12 @@ function renderFilterItems(
   multiple: boolean,
 ) {
   return filters.map((filter, index) => {
+    const key = String(filter.value);
+
     if (filter.children) {
       return (
         <SubMenu
-          key={filter.value || index}
+          key={key || index}
           title={filter.text}
           popupClassName={`${prefixCls}-dropdown-submenu`}
         >
@@ -39,8 +41,8 @@ function renderFilterItems(
     const Component = multiple ? Checkbox : Radio;
 
     return (
-      <MenuItem key={filter.value !== undefined ? filter.value : index}>
+      <MenuItem key={filter.value !== undefined ? key : index}>
-        <Component checked={filteredKeys.includes(String(filter.value))} />
+        <Component checked={filteredKeys.includes(key)} />
         <span>{filter.text}</span>
       </MenuItem>
     );
@@ -189,7 +191,12 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
           openKeys={openKeys}
           onOpenChange={onOpenChange}
         >
-          {renderFilterItems(column.filters || [], prefixCls, getFilteredKeysSync(), filterMultiple)}
+          {renderFilterItems(
+            column.filters || [],
+            prefixCls,
+            getFilteredKeysSync(),
+            filterMultiple,
+          )}
         </Menu>
         <div className={`${prefixCls}-dropdown-btns`}>
           <Button type="link" size="small" disabled={selectedKeys.length === 0} onClick={onReset}>

components/table/hooks/useFilter/index.tsx

@@ -31,7 +31,7 @@ function collectFilterStates<RecordType>(
 
     if ('children' in column) {
       filterStates = [...filterStates, ...collectFilterStates(column.children, init, columnPos)];
-    } else if ('filters' in column || 'filterDropdown' in column) {
+    } else if ('filters' in column || 'filterDropdown' in column || 'onFilter' in column) {
       if ('filteredValue' in column) {
         // Controlled
         filterStates.push({
@@ -125,7 +125,7 @@ function generateFilterInfo<RecordType>(filterStates: FilterState<RecordType>[])
 }
 
 function flattenKeys(filters?: ColumnFilterItem[]) {
-  let keys: Key[] = [];
+  let keys: (string | number | boolean)[] = [];
   (filters || []).forEach(({ value, children }) => {
     keys.push(value);
     if (children) {

components/table/interface.tsx

@@ -39,7 +39,7 @@ export type CompareFn<T> = (a: T, b: T, sortOrder?: SortOrder) => number;
 
 export interface ColumnFilterItem {
   text: React.ReactNode;
-  value: string;
+  value: string | number | boolean;
   children?: ColumnFilterItem[];
 }
 
@@ -92,7 +92,7 @@ export interface ColumnType<RecordType> extends RcColumnType<RecordType> {
   filteredValue?: Key[] | null;
   defaultFilteredValue?: Key[] | null;
   filterIcon?: React.ReactNode | ((filtered: boolean) => React.ReactNode);
-  onFilter?: (value: any, record: RecordType) => boolean;
+  onFilter?: (value: string | number | boolean, record: RecordType) => boolean;
   filterDropdownVisible?: boolean;
   onFilterDropdownVisibleChange?: (visible: boolean) => void;
 }

components/table/style/index.less

@@ -58,17 +58,10 @@
     // Fixed first or last should special process
     &.@{table-prefix-cls}-cell-fix-left-last,
     &.@{table-prefix-cls}-cell-fix-right-first {
-      display: flex;
       overflow: visible;
 
-      > .@{table-prefix-cls}-row-indent,
-      > .@{table-prefix-cls}-row-expand-icon {
-        flex: none;
-      }
-
       .@{table-prefix-cls}-cell-content {
         display: block;
-        flex: auto;
         overflow: hidden;
         text-overflow: ellipsis;
       }
@@ -427,14 +420,25 @@
     text-align: center;
   }
 
+  &-row-indent {
+    float: left;
+    height: 1px;
+
+    .@{table-wrapepr-rtl-cls} & {
+      float: right;
+    }
+  }
+
   &-row-expand-icon {
     .operation-unit();
     position: relative;
     display: inline-flex;
+    float: left;
     box-sizing: border-box;
 
     width: ceil(@font-size-sm * 1.4);
     height: ceil(@font-size-sm * 1.4);
+    padding: 0;
     color: inherit;
     line-height: @font-size-sm;
     vertical-align: floor((@font-size-base - ceil(@font-size-sm * 1.4)) / 2);
@@ -445,6 +449,10 @@
     transition: all 0.3s;
     user-select: none;
 
+    .@{table-wrapepr-rtl-cls} & {
+      float: right;
+    }
+
     &:focus,
     &:hover,
     &:active {
@@ -493,6 +501,7 @@
     }
 
     .@{table-prefix-cls}-row-indent + & {
+      margin-top: (@font-size-base * @line-height-base - ceil(@font-size-sm * 1.4)) / 2;
       margin-right: @padding-xs;
 
       .@{table-wrapepr-rtl-cls} & {

components/tabs/style/card-style.less

@@ -57,11 +57,6 @@
     &:hover {
       color: @heading-color;
     }
-
-    .@{tab-prefix-cls}-rtl& {
-      margin-right: 3px;
-      margin-left: -5px;
-    }
   }
 
   &&-card &-card-content > &-tabpane,
@@ -80,10 +75,6 @@
     line-height: @tabs-title-font-size * @line-height-base + extract(@tabs-horizontal-padding, 1) *
       2;
 
-    .@{tab-prefix-cls}-rtl & {
-      float: left !important;
-    }
-
     .@{tab-prefix-cls}-new-tab {
       position: relative;
       width: 20px;
@@ -193,3 +184,5 @@
     color: @primary-color;
   }
 }
+
+@import './card-style.rtl.less';

components/tabs/style/card-style.rtl.less

@@ -0,0 +1,20 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@tab-prefix-cls: ~'@{ant-prefix}-tabs';
+
+// card style
+.@{tab-prefix-cls} {
+  &&-card &-card-bar &-tab &-close-x {
+    .@{tab-prefix-cls}-rtl& {
+      margin-right: 3px;
+      margin-left: -5px;
+    }
+  }
+
+  &-extra-content {
+    .@{tab-prefix-cls}-rtl & {
+      float: left !important;
+    }
+  }
+}

components/tabs/style/index.less

@@ -23,10 +23,6 @@
   overflow: hidden;
   .clearfix;
 
-  &-rtl {
-    direction: rtl;
-  }
-
   &-ink-bar {
     position: absolute;
     bottom: 1px;
@@ -37,11 +33,6 @@
     height: 2px;
     background-color: @tabs-ink-bar-color;
     transform-origin: 0 0;
-
-    .@{tab-prefix-cls}-rtl & {
-      right: 0;
-      left: auto;
-    }
   }
 
   &-bar {
@@ -125,11 +116,6 @@
       text-transform: none;
       transform: translate(-50%, -50%);
 
-      .@{tab-prefix-cls}-rtl & {
-        right: 50%;
-        left: auto;
-      }
-
       &-target {
         display: block;
         .iconfont-size-under-12px(10px);
@@ -147,21 +133,11 @@
 
   &-tab-next {
     right: 2px;
-
-    .@{tab-prefix-cls}-rtl & {
-      right: auto;
-      left: 2px;
-    }
   }
 
   &-tab-prev {
     left: 0;
 
-    .@{tab-prefix-cls}-rtl & {
-      right: 2px;
-      left: auto;
-    }
-
     :root & {
       filter: none;
     }
@@ -207,10 +183,6 @@
       cursor: pointer;
       transition: color 0.3s @ease-in-out;
 
-      .@{tab-prefix-cls}-rtl & {
-        margin: @tabs-horizontal-margin-rtl;
-      }
-
       &::before {
         position: absolute;
         top: -1px;
@@ -237,11 +209,6 @@
 
       .@{iconfont-css-prefix} {
         margin-right: 8px;
-
-        .@{tab-prefix-cls}-rtl & {
-          margin-right: 0;
-          margin-left: 8px;
-        }
       }
 
       &-active {
@@ -469,3 +436,5 @@
 .@{tab-prefix-cls}-right-content {
   .tabs-no-animation();
 }
+
+@import './rtl.less';

components/tabs/style/rtl.less

@@ -0,0 +1,57 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import './card-style';
+
+@tab-prefix-cls: ~'@{ant-prefix}-tabs';
+
+.@{tab-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-ink-bar {
+    .@{tab-prefix-cls}-rtl & {
+      right: 0;
+      left: auto;
+    }
+  }
+
+  &-tab-prev,
+  &-tab-next {
+    &-icon {
+      .@{tab-prefix-cls}-rtl & {
+        right: 50%;
+        left: auto;
+      }
+    }
+  }
+
+  &-tab-next {
+    .@{tab-prefix-cls}-rtl & {
+      right: auto;
+      left: 2px;
+    }
+  }
+
+  &-tab-prev {
+    .@{tab-prefix-cls}-rtl & {
+      right: 2px;
+      left: auto;
+    }
+  }
+
+  &-nav {
+    .@{tab-prefix-cls}-tab {
+      .@{tab-prefix-cls}-rtl & {
+        margin: @tabs-horizontal-margin-rtl;
+      }
+
+      .@{iconfont-css-prefix} {
+        .@{tab-prefix-cls}-rtl & {
+          margin-right: 0;
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+}

components/tag/style/index.less

@@ -36,13 +36,6 @@
     padding: 0 8px;
   }
 
-  &-rtl {
-    margin-right: 0;
-    margin-left: 8px;
-    direction: rtl;
-    text-align: right;
-  }
-
   .@{iconfont-css-prefix}-close {
     .iconfont-size-under-12px(10px);
 
@@ -52,11 +45,6 @@
     cursor: pointer;
     transition: all 0.3s @ease-in-out-circ;
 
-    .@{tag-prefix-cls}-rtl& {
-      margin-right: 3px;
-      margin-left: 0;
-    }
-
     &:hover {
       color: @heading-color;
     }
@@ -132,3 +120,5 @@
   .make-status-color-classes('red', error);
   .make-status-color-classes('orange', warning);
 }
+
+@import './rtl.less';

components/tag/style/rtl.less

@@ -0,0 +1,20 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@tag-prefix-cls: ~'@{ant-prefix}-tag';
+
+.@{tag-prefix-cls} {
+  &-rtl {
+    margin-right: 0;
+    margin-left: 8px;
+    direction: rtl;
+    text-align: right;
+  }
+
+  .@{iconfont-css-prefix}-close {
+    .@{tag-prefix-cls}-rtl& {
+      margin-right: 3px;
+      margin-left: 0;
+    }
+  }
+}

components/timeline/style/index.less

@@ -10,10 +10,6 @@
   padding: 0;
   list-style: none;
 
-  &-rtl {
-    direction: rtl;
-  }
-
   &-item {
     position: relative;
     margin: 0;
@@ -27,13 +23,6 @@
       left: 4px;
       height: calc(100% - 10px);
       border-left: @timeline-width solid @timeline-color;
-
-      .@{timeline-prefix-cls}-rtl & {
-        right: 4px;
-        left: auto;
-        border-right: @timeline-width solid @timeline-color;
-        border-left: none;
-      }
     }
 
     &-pending &-head {
@@ -87,12 +76,6 @@
       border: 0;
       border-radius: 0;
       transform: translate(-50%, -50%);
-
-      .@{timeline-prefix-cls}-rtl & {
-        right: 5px;
-        left: auto;
-        transform: translate(50%, -50%);
-      }
     }
 
     &-content {
@@ -100,10 +83,6 @@
       top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
       margin: 0 0 0 18px;
       word-break: break-word;
-
-      .@{timeline-prefix-cls}-rtl & {
-        margin: 0 18px 0 0;
-      }
     }
 
     &-last {
@@ -124,27 +103,13 @@
       &-head,
       &-head-custom {
         left: 50%;
-
-        .@{timeline-prefix-cls}-rtl& {
-          right: 50%;
-          left: auto;
-        }
       }
 
       &-head {
         margin-left: -4px;
 
-        .@{timeline-prefix-cls}-rtl& {
-          margin-right: -4px;
-          margin-left: 0;
-        }
         &-custom {
           margin-left: 1px;
-
-          .@{timeline-prefix-cls}-rtl& {
-            margin-right: 1px;
-            margin-left: 0;
-          }
         }
       }
 
@@ -153,12 +118,6 @@
           left: calc(50% - 4px);
           width: calc(50% - 14px);
           text-align: left;
-
-          .@{timeline-prefix-cls}-rtl& {
-            right: calc(50% - 4px);
-            left: auto;
-            text-align: right;
-          }
         }
       }
 
@@ -167,10 +126,6 @@
           width: calc(50% - 12px);
           margin: 0;
           text-align: right;
-
-          .@{timeline-prefix-cls}-rtl& {
-            text-align: left;
-          }
         }
       }
     }
@@ -183,20 +138,9 @@
       .@{timeline-prefix-cls}-item-head-custom {
         // stylelint-disable-next-line function-calc-no-invalid
         left: calc(100% - 4px - @timeline-width);
-
-        .@{timeline-prefix-cls}-rtl& {
-          right: 0;
-          left: auto;
-        }
       }
       .@{timeline-prefix-cls}-item-content {
         width: calc(100% - 18px);
-
-        .@{timeline-prefix-cls}-rtl& {
-          width: 100%;
-          margin-right: 18px;
-          text-align: right;
-        }
       }
     }
   }
@@ -205,11 +149,6 @@
     display: block;
     height: calc(100% - 14px);
     border-left: 2px dotted @timeline-color;
-
-    .@{timeline-prefix-cls}-rtl& {
-      border-right: 2px dotted @timeline-color;
-      border-left: none;
-    }
   }
 
   &&-reverse &-item-last &-item-tail {
@@ -222,11 +161,6 @@
       display: block;
       height: calc(100% - 15px);
       border-left: 2px dotted @timeline-color;
-
-      .@{timeline-prefix-cls}-rtl& {
-        border-right: 2px dotted @timeline-color;
-        border-left: none;
-      }
     }
     .@{timeline-prefix-cls}-item-content {
       min-height: 48px;
@@ -248,3 +182,5 @@
     }
   }
 }
+
+@import './rtl.less';

components/timeline/style/rtl.less

@@ -0,0 +1,119 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@timeline-prefix-cls: ~'@{ant-prefix}-timeline';
+
+.@{timeline-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-item {
+    &-tail {
+      .@{timeline-prefix-cls}-rtl & {
+        right: 4px;
+        left: auto;
+        border-right: @timeline-width solid @timeline-color;
+        border-left: none;
+      }
+    }
+
+    &-head-custom {
+      .@{timeline-prefix-cls}-rtl & {
+        right: 5px;
+        left: auto;
+        transform: translate(50%, -50%);
+      }
+    }
+
+    &-content {
+      .@{timeline-prefix-cls}-rtl & {
+        margin: 0 18px 0 0;
+      }
+    }
+  }
+
+  &.@{timeline-prefix-cls}-alternate,
+  &.@{timeline-prefix-cls}-right,
+  &.@{timeline-prefix-cls}-label {
+    .@{timeline-prefix-cls}-item {
+      &-tail,
+      &-head,
+      &-head-custom {
+        .@{timeline-prefix-cls}-rtl& {
+          right: 50%;
+          left: auto;
+        }
+      }
+
+      &-head {
+        .@{timeline-prefix-cls}-rtl& {
+          margin-right: -4px;
+          margin-left: 0;
+        }
+
+        &-custom {
+          .@{timeline-prefix-cls}-rtl& {
+            margin-right: 1px;
+            margin-left: 0;
+          }
+        }
+      }
+
+      &-left {
+        .@{timeline-prefix-cls}-item-content {
+          .@{timeline-prefix-cls}-rtl& {
+            right: calc(50% - 4px);
+            left: auto;
+            text-align: right;
+          }
+        }
+      }
+
+      &-right {
+        .@{timeline-prefix-cls}-item-content {
+          .@{timeline-prefix-cls}-rtl& {
+            text-align: left;
+          }
+        }
+      }
+    }
+  }
+
+  &.@{timeline-prefix-cls}-right {
+    .@{timeline-prefix-cls}-item-right {
+      .@{timeline-prefix-cls}-item-tail,
+      .@{timeline-prefix-cls}-item-head,
+      .@{timeline-prefix-cls}-item-head-custom {
+        .@{timeline-prefix-cls}-rtl& {
+          right: 0;
+          left: auto;
+        }
+      }
+
+      .@{timeline-prefix-cls}-item-content {
+        .@{timeline-prefix-cls}-rtl& {
+          width: 100%;
+          margin-right: 18px;
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &&-pending &-item-last &-item-tail {
+    .@{timeline-prefix-cls}-rtl& {
+      border-right: 2px dotted @timeline-color;
+      border-left: none;
+    }
+  }
+
+  &&-reverse &-item-pending {
+    .@{timeline-prefix-cls}-item-tail {
+      .@{timeline-prefix-cls}-rtl& {
+        border-right: 2px dotted @timeline-color;
+        border-left: none;
+      }
+    }
+  }
+}

components/tooltip/style/index.less

@@ -21,10 +21,6 @@
   max-width: @tooltip-max-width;
   visibility: visible;
 
-  &-rtl {
-    direction: rtl;
-  }
-
   &-hidden {
     display: none;
   }
@@ -65,10 +61,6 @@
     background-color: @tooltip-bg;
     border-radius: @border-radius-base;
     box-shadow: @box-shadow-base;
-
-    .@{tooltip-prefix-cls}-rtl & {
-      text-align: right;
-    }
   }
 
   // Arrows
@@ -193,3 +185,5 @@
     right: @tooltip-arrow-offset-horizontal;
   }
 }
+
+@import './rtl.less';

components/tooltip/style/rtl.less

@@ -0,0 +1,14 @@
+@tooltip-prefix-cls: ~'@{ant-prefix}-tooltip';
+
+// Base class
+.@{tooltip-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+  // Wrapper for the tooltip content
+  &-inner {
+    .@{tooltip-prefix-cls}-rtl & {
+      text-align: right;
+    }
+  }
+}

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

@@ -951,7 +951,7 @@ exports[`Transfer should support render value and label in item 1`] = `
                 type="button"
               >
                 <ForwardRef(RightOutlined)>
-                  <ForwardRef(AntdIcon)
+                  <AntdIcon
                     icon={
                       Object {
                         "icon": Object {
@@ -1021,7 +1021,7 @@ exports[`Transfer should support render value and label in item 1`] = `
                         </svg>
                       </IconReact>
                     </span>
-                  </ForwardRef(AntdIcon)>
+                  </AntdIcon>
                 </ForwardRef(RightOutlined)>
               </button>
             </Wave>
@@ -1045,7 +1045,7 @@ exports[`Transfer should support render value and label in item 1`] = `
                 type="button"
               >
                 <ForwardRef(LeftOutlined)>
-                  <ForwardRef(AntdIcon)
+                  <AntdIcon
                     icon={
                       Object {
                         "icon": Object {
@@ -1115,7 +1115,7 @@ exports[`Transfer should support render value and label in item 1`] = `
                         </svg>
                       </IconReact>
                     </span>
-                  </ForwardRef(AntdIcon)>
+                  </AntdIcon>
                 </ForwardRef(LeftOutlined)>
               </button>
             </Wave>

components/transfer/__tests__/__snapshots__/search.test.js.snap

@@ -51,7 +51,7 @@ exports[`Transfer.Search should show cross icon when input value exists 1`] = `
       className="undefined-action"
     >
       <ForwardRef(SearchOutlined)>
-        <ForwardRef(AntdIcon)
+        <AntdIcon
           icon={
             Object {
               "icon": Object {
@@ -121,7 +121,7 @@ exports[`Transfer.Search should show cross icon when input value exists 1`] = `
               </svg>
             </IconReact>
           </span>
-        </ForwardRef(AntdIcon)>
+        </AntdIcon>
       </ForwardRef(SearchOutlined)>
     </span>
   </div>
@@ -181,7 +181,7 @@ exports[`Transfer.Search should show cross icon when input value exists 2`] = `
       onClick={[Function]}
     >
       <ForwardRef(CloseCircleFilled)>
-        <ForwardRef(AntdIcon)
+        <AntdIcon
           icon={
             Object {
               "icon": Object {
@@ -251,7 +251,7 @@ exports[`Transfer.Search should show cross icon when input value exists 2`] = `
               </svg>
             </IconReact>
           </span>
-        </ForwardRef(AntdIcon)>
+        </AntdIcon>
       </ForwardRef(CloseCircleFilled)>
     </a>
   </div>

components/transfer/style/index.less

@@ -2,6 +2,7 @@
 @import '../../style/mixins/index';
 @import '../../checkbox/style/mixin';
 @import './customize.less';
+@import './rtl.less';
 
 @transfer-prefix-cls: ~'@{ant-prefix}-transfer';
 
@@ -14,10 +15,6 @@
 
   position: relative;
 
-  &-rtl {
-    direction: rtl;
-  }
-
   &-disabled {
     .@{transfer-prefix-cls}-list {
       background: @transfer-disabled-bg;
@@ -51,11 +48,6 @@
         line-height: @input-height-base;
         text-align: center;
 
-        .@{transfer-prefix-cls}-rtl & {
-          right: auto;
-          left: 12px;
-        }
-
         .@{iconfont-css-prefix} {
           color: @disabled-color;
           transition: all 0.3s;
@@ -83,27 +75,13 @@
       border-bottom: @border-width-base @border-style-base @border-color-split;
       border-radius: @border-radius-base @border-radius-base 0 0;
 
-      .@{transfer-prefix-cls}-rtl & {
-        right: 0;
-        left: auto;
-      }
       &-title {
         position: absolute;
         right: 12px;
-
-        .@{transfer-prefix-cls}-rtl & {
-          right: auto;
-          left: 12px;
-        }
       }
 
       .@{ant-prefix}-checkbox-wrapper + span {
         padding-left: 8px;
-
-        .@{transfer-prefix-cls}-rtl & {
-          padding-right: 8px;
-          padding-left: 0;
-        }
       }
     }
 
@@ -118,11 +96,6 @@
         left: 0;
         width: 100%;
         padding: 12px;
-
-        .@{transfer-prefix-cls}-rtl & {
-          right: 0;
-          left: auto;
-        }
       }
     }
 
@@ -145,18 +118,9 @@
         transition: all 0.3s;
         > span {
           padding-right: 0;
-
-          .@{transfer-prefix-cls}-rtl & {
-            padding-left: 0;
-          }
         }
         &-text {
           padding-left: 8px;
-
-          .@{transfer-prefix-cls}-rtl & {
-            padding-right: 8px;
-            padding-left: 0;
-          }
         }
       }
 
@@ -197,11 +161,6 @@
       width: 100%;
       border-top: @border-width-base @border-style-base @border-color-split;
       border-radius: 0 0 @border-radius-base @border-radius-base;
-
-      .@{transfer-prefix-cls}-rtl & {
-        right: 0;
-        left: auto;
-      }
     }
   }
 

components/transfer/style/rtl.less

@@ -0,0 +1,74 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import '../../checkbox/style/mixin';
+
+@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
+
+.@{transfer-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-list {
+    &-search {
+      &-action {
+        .@{transfer-prefix-cls}-rtl & {
+          right: auto;
+          left: 12px;
+        }
+      }
+    }
+
+    &-header {
+      .@{transfer-prefix-cls}-rtl & {
+        right: 0;
+        left: auto;
+      }
+      &-title {
+        .@{transfer-prefix-cls}-rtl & {
+          right: auto;
+          left: 12px;
+        }
+      }
+
+      .@{ant-prefix}-checkbox-wrapper + span {
+        .@{transfer-prefix-cls}-rtl & {
+          padding-right: 8px;
+          padding-left: 0;
+        }
+      }
+    }
+
+    &-body {
+      &-search-wrapper {
+        .@{transfer-prefix-cls}-rtl & {
+          right: 0;
+          left: auto;
+        }
+      }
+    }
+
+    &-content {
+      &-item {
+        > span {
+          .@{transfer-prefix-cls}-rtl & {
+            padding-left: 0;
+          }
+        }
+        &-text {
+          .@{transfer-prefix-cls}-rtl & {
+            padding-right: 8px;
+            padding-left: 0;
+          }
+        }
+      }
+    }
+
+    &-footer {
+      .@{transfer-prefix-cls}-rtl & {
+        right: 0;
+        left: auto;
+      }
+    }
+  }
+}

components/tree/DirectoryTree.tsx

@@ -151,7 +151,7 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
     const { onSelect, multiple } = this.props;
     const { expandedKeys = [] } = this.state;
     const { node, nativeEvent } = event;
-    const { eventKey = '' } = node.props;
+    const { key = '' } = node;
 
     const treeData = getTreeData(this.props);
     const newState: DirectoryTreeState = {};
@@ -171,7 +171,7 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
     if (multiple && ctrlPick) {
       // Control click
       newSelectedKeys = keys;
-      this.lastSelectedKey = eventKey;
+      this.lastSelectedKey = key;
       this.cachedSelectedKeys = newSelectedKeys;
       newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData, newSelectedKeys);
     } else if (multiple && shiftPick) {
@@ -179,16 +179,16 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
       newSelectedKeys = Array.from(
         new Set([
           ...(this.cachedSelectedKeys || []),
-          ...calcRangeKeys(treeData, expandedKeys, eventKey, this.lastSelectedKey),
+          ...calcRangeKeys(treeData, expandedKeys, key, this.lastSelectedKey),
         ]),
       );
       newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData, newSelectedKeys);
     } else {
       // Single click
-      newSelectedKeys = [eventKey];
+      newSelectedKeys = [key];
-      this.lastSelectedKey = eventKey;
+      this.lastSelectedKey = key;
       this.cachedSelectedKeys = newSelectedKeys;
-      newEvent.selectedNodes = [event.node.props.data];
+      newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData, newSelectedKeys);
     }
     newState.selectedKeys = newSelectedKeys;
 

components/tree/style/index.less

@@ -17,10 +17,6 @@
     border-radius: @border-radius-base;
     transition: background-color 0.3s;
 
-    &-rtl {
-      direction: rtl;
-    }
-
     &-focused:not(:hover):not(&-active-focused) {
       background: @primary-1;
     }
@@ -47,10 +43,6 @@
       align-items: flex-start;
       padding: 0 0 (@padding-xs / 2) 0;
       outline: none;
-
-      &-rtl {
-        direction: rtl;
-      }
       // Disabled
       &-disabled {
         // >>> Title
@@ -101,10 +93,6 @@
         .@{tree-prefix-cls}-switcher-icon {
           svg {
             transform: rotate(-90deg);
-
-            .@{tree-prefix-cls}-rtl& {
-              transform: rotate(90deg);
-            }
           }
         }
       }
@@ -198,12 +186,6 @@
             bottom: -@tree-title-height - 4px;
             border-right: 1px solid @border-color-base;
             content: '';
-            .@{tree-prefix-cls}-rtl& {
-              right: auto;
-              left: -@tree-title-height / 2;
-              border-right: none;
-              border-left: 1px solid @border-color-base;
-            }
           }
 
           &-end {
@@ -233,3 +215,5 @@
 }
 
 .antTreeFn(@tree-prefix-cls);
+
+@import './rtl.less';

components/tree/style/rtl.less

@@ -0,0 +1,50 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import '../../checkbox/style/mixin';
+
+@tree-prefix-cls: ~'@{ant-prefix}-tree';
+@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
+
+.antTreeFn(@tree-prefix-cls) {
+  .@{tree-prefix-cls} {
+    &-rtl {
+      direction: rtl;
+    }
+
+    // ===================== TreeNode =====================
+    .@{tree-node-prefix-cls} {
+      &-rtl {
+        direction: rtl;
+      }
+    }
+
+    // >>> Switcher
+    & &-switcher {
+      &_close {
+        .@{tree-prefix-cls}-switcher-icon {
+          svg {
+            .@{tree-prefix-cls}-rtl& {
+              transform: rotate(90deg);
+            }
+          }
+        }
+      }
+    }
+    // ==================== Show Line =====================
+    &-show-line {
+      // ================ Indent lines ================
+      .@{tree-prefix-cls}-indent {
+        &-unit {
+          &::before {
+            .@{tree-prefix-cls}-rtl& {
+              right: auto;
+              left: -@tree-title-height / 2;
+              border-right: none;
+              border-left: 1px solid @border-color-base;
+            }
+          }
+        }
+      }
+    }
+  }
+}

components/upload/Upload.tsx

@@ -188,7 +188,10 @@ class Upload extends React.Component<UploadProps, UploadState> {
 
     const { onChange } = this.props;
     if (onChange) {
-      onChange(info);
+      onChange({
+        ...info,
+        fileList: [...info.fileList],
+      });
     }
   };
 

components/upload/__tests__/uploadlist.test.js

@@ -130,7 +130,9 @@ describe('Upload List', () => {
 
   it('should be uploading when upload a file', done => {
     let wrapper;
-    const onChange = ({ file }) => {
+    let latestFileList = null;
+    const onChange = ({ file, fileList: eventFileList }) => {
+      expect(eventFileList === latestFileList).toBeFalsy();
       if (file.status === 'uploading') {
         expect(wrapper.render()).toMatchSnapshot();
       }
@@ -138,6 +140,8 @@ describe('Upload List', () => {
         expect(wrapper.render()).toMatchSnapshot();
         done();
       }
+
+      latestFileList = eventFileList;
     };
     wrapper = mount(
       <Upload

components/upload/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './rtl';
 
 @upload-prefix-cls: ~'@{ant-prefix}-upload';
 @upload-item: ~'@{ant-prefix}-upload-list-item';
@@ -11,10 +12,6 @@
 
   outline: 0;
 
-  &-rtl {
-    direction: rtl;
-  }
-
   p {
     margin: 0;
   }
@@ -52,11 +49,6 @@
     cursor: pointer;
     transition: border-color 0.3s ease;
 
-    .@{upload-prefix-cls}-rtl& {
-      float: right;
-      margin-right: 0;
-      margin-left: 8px;
-    }
     > .@{upload-prefix-cls} {
       display: table-cell;
       width: 100%;
@@ -153,19 +145,9 @@
     &:hover {
       .@{upload-prefix-cls}-list-item-name-icon-count-1 {
         padding-right: 14px;
-
-        .@{upload-prefix-cls}-list-rtl & {
-          padding-right: 22px;
-          padding-left: 14px;
-        }
       }
       .@{upload-prefix-cls}-list-item-name-icon-count-2 {
         padding-right: 28px;
-
-        .@{upload-prefix-cls}-list-rtl & {
-          padding-right: 22px;
-          padding-left: 28px;
-        }
       }
     }
   }
@@ -181,19 +163,10 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-
-      .@{upload-prefix-cls}-list-rtl & {
-        padding-right: @font-size-base + 8px;
-        padding-left: 0;
-      }
     }
 
     &-name-icon-count-1 {
       padding-right: 14px;
-
-      .@{upload-prefix-cls}-list-rtl & {
-        padding-left: 14px;
-      }
     }
 
     &-card-actions {
@@ -201,11 +174,6 @@
       right: 0;
       opacity: 0;
 
-      .@{upload-prefix-cls}-list-rtl & {
-        right: auto;
-        left: 0;
-      }
-
       &.picture {
         top: 25px;
         line-height: 1;
@@ -214,11 +182,6 @@
       .@{iconfont-css-prefix} {
         padding-right: 6px;
         color: @upload-actions-color;
-
-        .@{upload-prefix-cls}-list-rtl & {
-          padding-right: 0;
-          padding-left: 5px;
-        }
       }
     }
 
@@ -227,10 +190,6 @@
       padding: 0 12px 0 4px;
       transition: background-color 0.3s;
 
-      .@{upload-prefix-cls}-list-rtl & {
-        padding: 0 4px 0 12px;
-      }
-
       > span {
         display: block;
         width: 100%;
@@ -260,11 +219,6 @@
       opacity: 0;
       transition: all 0.3s;
 
-      .@{upload-prefix-cls}-list-rtl & {
-        right: auto;
-        left: 4px;
-      }
-
       &:hover {
         color: @text-color;
       }
@@ -291,11 +245,6 @@
     &-error &-card-actions {
       .@{iconfont-css-prefix} {
         color: @error-color;
-
-        .@{upload-prefix-cls}-list-rtl & {
-          padding-right: 0;
-          padding-left: 5px;
-        }
       }
       opacity: 1;
     }
@@ -307,11 +256,6 @@
       padding-left: @font-size-base + 12px;
       font-size: @font-size-base;
       line-height: 0;
-
-      .@{upload-prefix-cls}-list-rtl & {
-        padding-right: @font-size-base + 12px;
-        padding-left: 0;
-      }
     }
   }
 
@@ -356,11 +300,6 @@
       .@{iconfont-css-prefix} {
         font-size: 26px;
       }
-
-      .@{upload-prefix-cls}-list-rtl& {
-        right: 8px;
-        left: auto;
-      }
     }
 
     .@{upload-item}-icon {
@@ -373,12 +312,6 @@
       .@{iconfont-css-prefix} {
         font-size: 26px;
       }
-
-      .@{upload-prefix-cls}-list-rtl& {
-        right: 50%;
-        left: auto;
-        transform: translate(50%, -50%);
-      }
     }
 
     .@{upload-item}-image {
@@ -404,30 +337,14 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       transition: all 0.3s;
-
-      .@{upload-prefix-cls}-list-rtl& {
-        margin: 0 8px 0 0;
-        padding-right: 48px;
-        padding-left: 8px;
-      }
     }
 
     .@{upload-item}-name-icon-count-1 {
       padding-right: 18px;
-
-      .@{upload-prefix-cls}-list-rtl& {
-        padding-right: 48px;
-        padding-left: 18px;
-      }
     }
 
     .@{upload-item}-name-icon-count-2 {
       padding-right: 36px;
-
-      .@{upload-prefix-cls}-list-rtl& {
-        padding-right: 48px;
-        padding-left: 36px;
-      }
     }
 
     .@{upload-item}-uploading .@{upload-item}-name {
@@ -439,11 +356,6 @@
       width: ~'calc(100% - 24px)';
       margin-top: 0;
       padding-left: 56px;
-
-      .@{upload-prefix-cls}-list-rtl& {
-        padding-right: 56px;
-        padding-left: 0;
-      }
     }
 
     .@{iconfont-css-prefix}-close {
@@ -452,11 +364,6 @@
       right: 8px;
       line-height: 1;
       opacity: 1;
-
-      .@{upload-prefix-cls}-list-rtl& {
-        right: auto;
-        left: 8px;
-      }
     }
   }
 
@@ -475,11 +382,6 @@
       width: @upload-picture-card-size;
       height: @upload-picture-card-size;
       margin: 0 8px 8px 0;
-
-      .@{upload-prefix-cls}-list-rtl& {
-        float: right;
-        margin: 0 0 8px 8px;
-      }
     }
 
     .@{upload-item}-info {
@@ -513,12 +415,6 @@
       opacity: 0;
       transition: all 0.3s;
 
-      .@{upload-prefix-cls}-list-rtl& {
-        right: 50%;
-        left: auto;
-        transform: translate(50%, -50%);
-      }
-
       .@{iconfont-css-prefix}-eye,
       .@{iconfont-css-prefix}-download,
       .@{iconfont-css-prefix}-delete {
@@ -561,11 +457,6 @@
       position: absolute;
       bottom: 10px;
       display: block;
-
-      .@{upload-prefix-cls}-list-rtl& {
-        margin: 8px 0 0;
-        padding: 0;
-      }
     }
 
     .@{upload-item}-uploading {

components/upload/style/rtl.less

@@ -0,0 +1,172 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@upload-prefix-cls: ~'@{ant-prefix}-upload';
+@upload-item: ~'@{ant-prefix}-upload-list-item';
+
+.@{upload-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &&-select-picture-card {
+    .@{upload-prefix-cls}-rtl& {
+      float: right;
+      margin-right: 0;
+      margin-left: 8px;
+    }
+  }
+}
+
+.@{upload-prefix-cls}-list {
+  &-item-list-type-text {
+    &:hover {
+      .@{upload-prefix-cls}-list-item-name-icon-count-1 {
+        .@{upload-prefix-cls}-list-rtl & {
+          padding-right: 22px;
+          padding-left: 14px;
+        }
+      }
+      .@{upload-prefix-cls}-list-item-name-icon-count-2 {
+        .@{upload-prefix-cls}-list-rtl & {
+          padding-right: 22px;
+          padding-left: 28px;
+        }
+      }
+    }
+  }
+  &-item {
+    &-name {
+      .@{upload-prefix-cls}-list-rtl & {
+        padding-right: @font-size-base + 8px;
+        padding-left: 0;
+      }
+    }
+
+    &-name-icon-count-1 {
+      .@{upload-prefix-cls}-list-rtl & {
+        padding-left: 14px;
+      }
+    }
+
+    &-card-actions {
+      .@{upload-prefix-cls}-list-rtl & {
+        right: auto;
+        left: 0;
+      }
+      .@{iconfont-css-prefix} {
+        .@{upload-prefix-cls}-list-rtl & {
+          padding-right: 0;
+          padding-left: 5px;
+        }
+      }
+    }
+
+    &-info {
+      .@{upload-prefix-cls}-list-rtl & {
+        padding: 0 4px 0 12px;
+      }
+    }
+
+    .@{iconfont-css-prefix}-close {
+      .@{upload-prefix-cls}-list-rtl & {
+        right: auto;
+        left: 4px;
+      }
+    }
+
+    &-error &-card-actions {
+      .@{iconfont-css-prefix} {
+        .@{upload-prefix-cls}-list-rtl & {
+          padding-right: 0;
+          padding-left: 5px;
+        }
+      }
+    }
+
+    &-progress {
+      .@{upload-prefix-cls}-list-rtl & {
+        padding-right: @font-size-base + 12px;
+        padding-left: 0;
+      }
+    }
+  }
+
+  &-picture,
+  &-picture-card {
+    .@{upload-item}-thumbnail {
+      .@{upload-prefix-cls}-list-rtl& {
+        right: 8px;
+        left: auto;
+      }
+    }
+
+    .@{upload-item}-icon {
+      .@{upload-prefix-cls}-list-rtl& {
+        right: 50%;
+        left: auto;
+        transform: translate(50%, -50%);
+      }
+    }
+
+    .@{upload-item}-name {
+      .@{upload-prefix-cls}-list-rtl& {
+        margin: 0 8px 0 0;
+        padding-right: 48px;
+        padding-left: 8px;
+      }
+    }
+
+    .@{upload-item}-name-icon-count-1 {
+      .@{upload-prefix-cls}-list-rtl& {
+        padding-right: 48px;
+        padding-left: 18px;
+      }
+    }
+
+    .@{upload-item}-name-icon-count-2 {
+      .@{upload-prefix-cls}-list-rtl& {
+        padding-right: 48px;
+        padding-left: 36px;
+      }
+    }
+
+    .@{upload-item}-progress {
+      .@{upload-prefix-cls}-list-rtl& {
+        padding-right: 56px;
+        padding-left: 0;
+      }
+    }
+
+    .@{iconfont-css-prefix}-close {
+      .@{upload-prefix-cls}-list-rtl& {
+        right: auto;
+        left: 8px;
+      }
+    }
+  }
+
+  &-picture-card {
+    .@{upload-item} {
+      .@{upload-prefix-cls}-list-rtl& {
+        float: right;
+        margin: 0 0 8px 8px;
+      }
+    }
+
+    .@{upload-item}-actions {
+      .@{upload-prefix-cls}-list-rtl& {
+        right: 50%;
+        left: auto;
+        transform: translate(50%, -50%);
+      }
+    }
+
+    .@{upload-item}-file + .@{upload-item}-name {
+      .@{upload-prefix-cls}-list-rtl& {
+        margin: 8px 0 0;
+        padding: 0;
+      }
+    }
+  }
+}

docs/react/migration-v4.en-US.md

@@ -120,7 +120,7 @@ const Demo = () => (
 - Tree, Select, TreeSelect, AutoComplete rewrite
   - use virtual scrolling.
   - `onBlur` no longer trigger value change.
-  - `dropdownMatchSelectWidth` no longer automatically adapts to the content width, please set the dropdown width with numbers.
+  - `dropdownMatchSelectWidth={false}` will no longer automatically adapt dropdown to the content width, please set the dropdown width with numbers.
   - AutoComplete no longer support `optionLabelProp`. Please set Option `value` directly.
 - The Grid component uses flex layout.
 - Button's `danger` is now treated as a property instead of a button type.

docs/react/migration-v4.zh-CN.md

@@ -120,7 +120,7 @@ const Demo = () => (
 - Tree、Select、TreeSelect、AutoComplete 重新写
   - 使用虚拟滚动。
   - `onBlur` 时不再修改选中值。
-  - `dropdownMatchSelectWidth` 不再自动适应内容宽度，请用数字设置下拉宽度。
+  - `dropdownMatchSelectWidth={false}` 时下拉菜单不再会自动适应内容宽度，请用数字设置下拉宽度。
   - AutoComplete 不再支持 `optionLabelProp`，请直接设置 Option `value` 属性。
 - Grid 组件使用 flex 布局。
 - Button 的 `danger` 现在作为一个属性而不是按钮类型。

package.json

@@ -190,6 +190,7 @@
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-markdown": "^1.0.0",
     "eslint-plugin-react": "^7.14.2",
+    "eslint-plugin-react-hooks": "^2.5.0",
     "eslint-tinker": "^0.5.0",
     "fetch-jsonp": "^1.1.3",
     "full-icu": "^1.3.0",

site/theme/static/common.less

@@ -220,3 +220,28 @@ a {
     box-shadow: @shadow-2;
   }
 }
+
+// keep transition consistent to make mode toggle animation be more smooth, include:
+// nav bar background
+// nav search border
+// nav menu background
+// wrapper content
+// sidemenu background
+// sidemenu active background
+// content background
+// affix toc
+#header,
+#header #search-box,
+#header #nav.ant-menu,
+.main-wrapper,
+.main-wrapper > .ant-row > .main-menu .main-menu-inner > .ant-menu,
+.main-wrapper > .ant-row > .main-menu .main-menu-inner > .ant-menu.aside-container.ant-menu-inline > .ant-menu-item-group > .ant-menu-item-group-title::after,
+.main-wrapper .main-container,
+#demo-toc.toc {
+  transition: all 0.3s @ease-in-out-circ;
+}
+
+// remove margin-bottom from dark theme (why need margin-bottom in dark theme?)
+#header > .ant-row > .ant-col h1 {
+  margin-bottom: 0;
+}

site/theme/static/markdown.less

@@ -193,7 +193,7 @@
 .markdown .anchor {
   margin-left: 8px;
   opacity: 0;
-  transition: opacity .3s;
+  transition: opacity 0.3s;
 
   .ant-row-rtl & {
     margin-right: 8px;

site/theme/template/Color/ColorBlock.jsx

@@ -8,7 +8,7 @@ export default class ColorBlock extends Component {
     const colorMap = {
       default: ['#fff', 'unset'],
       dark: ['#314659', '#fff'],
-    }
+    };
     const [lastColor, firstColor] = dark ? colorMap.dark : colorMap.default;
     return {
       background: color,

site/theme/template/Color/ColorPalettes.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import cls from 'classnames';
 import Palette from './Palette';
 
-const ColorPalettes = (props) => {
+const ColorPalettes = props => {
   const { dark } = props;
 
   const colors = [
@@ -81,7 +81,7 @@ const ColorPalettes = (props) => {
   ];
   const colorCls = cls('color-palettes', {
     'color-palettes-dark': !!dark,
-  })
+  });
   return (
     <div className={colorCls}>
       {colors.map(color => (

site/theme/template/Content/Demo/index.jsx

@@ -161,10 +161,18 @@ class Demo extends React.Component {
       new RegExp(`#${meta.id}\\s*`, 'g'),
       '',
     );
-    const html = `<div id="container" style="padding: 24px"></div>
+    const html = `<!DOCTYPE html>
-<script>
+<html lang="en">
-  var mountNode = document.getElementById('container');
+  <head>
-</script>`;
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+  </head>
+  <body>
+    <div id="container" style="padding: 24px" />
+    <script>var mountNode = document.getElementById('container');</script>
+  </body>
+</html>`;
 
     const sourceCode = this.getSourceCode();
 
@@ -173,7 +181,10 @@ class Demo extends React.Component {
       html,
       js: sourceCode
         .replace(/import\s+\{(\s+[^}]*\s+)\}\s+from\s+'antd';/, 'const { $1 } = antd;')
-        .replace(/import\s+\{(\s+[^}]*\s+)\}\s+from\s+'@ant-design\/icons';/, 'const { $1 } = icons;')
+        .replace(
+          /import\s+\{(\s+[^}]*\s+)\}\s+from\s+'@ant-design\/icons';/,
+          'const { $1 } = icons;',
+        )
         .replace("import moment from 'moment';", '')
         .replace(/import\s+\{\s+(.*)\s+\}\s+from\s+'react-router';/, 'const { $1 } = ReactRouter;')
         .replace(
@@ -218,7 +229,7 @@ class Demo extends React.Component {
         return acc;
       },
       // eslint-disable-next-line no-undef
-      { react: 'latest', 'react-dom': 'latest', antd: antdReproduceVersion },
+      { antd: antdReproduceVersion },
     );
 
     dependencies['@ant-design/icons'] = 'latest';
@@ -242,9 +253,31 @@ import './index.css';
 ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
 `.trim();
     const indexCssContent = (style || '').replace(new RegExp(`#${meta.id}\\s*`, 'g'), '');
+
+    const codesandboxPackage = {
+      name: `${localizedTitle} - Ant Design Demo`,
+      version: '1.0.0',
+      main: 'index.js',
+      dependencies: {
+        ...dependencies,
+        react: '^16.12.0',
+        'react-dom': '^16.12.0',
+        'react-scripts': '^3.0.1',
+      },
+      devDependencies: {
+        typescript: '^3.8.2',
+      },
+      scripts: {
+        start: 'react-scripts start',
+        build: 'react-scripts build',
+        test: 'react-scripts test --env=jsdom',
+        eject: 'react-scripts eject',
+      },
+      browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],
+    };
     const codesanboxPrefillConfig = {
       files: {
-        'package.json': { content: { dependencies } },
+        'package.json': { content: codesandboxPackage },
         'index.css': { content: indexCssContent },
         'index.js': { content: indexJsContent },
         'index.html': {
@@ -299,21 +332,6 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
                 />
               </Tooltip>
             </form>
-            <form
-              action="https://codepen.io/pen/define"
-              method="POST"
-              target="_blank"
-              onClick={() => this.track({ type: 'codepen', demo: meta.id })}
-            >
-              <input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
-              <Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
-                <input
-                  type="submit"
-                  value="Create New Pen with Prefilled Data"
-                  className="code-box-codepen"
-                />
-              </Tooltip>
-            </form>
             <form
               action="https://codesandbox.io/api/v1/sandboxes/define"
               method="POST"
@@ -333,6 +351,24 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
                 />
               </Tooltip>
             </form>
+            <form
+              action="https://codepen.io/pen/define"
+              method="POST"
+              target="_blank"
+              onClick={() => this.track({ type: 'codepen', demo: meta.id })}
+              style={{
+                display: sourceCode ? '' : 'none',
+              }}
+            >
+              <input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
+              <Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
+                <input
+                  type="submit"
+                  value="Create New Pen with Prefilled Data"
+                  className="code-box-codepen"
+                />
+              </Tooltip>
+            </form>
             <Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
               <span
                 className="code-box-code-action"

site/theme/template/Home/RecommendPage.tsx

@@ -41,7 +41,8 @@ const LIST_CN: Recommend[] = [
 const LIST_EN: Recommend[] = [
   {
     title: 'Ant Design 4.0 is out!',
-    description: '⚡️ Smaller, faster, prettier and more powerfull, finally Ant Design 4.0 right here.',
+    description:
+      '⚡️ Smaller, faster, prettier and more powerfull, finally Ant Design 4.0 right here.',
     img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*G0nDS5-aESoAAAAAAAAAAABkARQnAQ',
     href: 'https://github.com/ant-design/ant-design/issues/21656',
     popularize: true,
@@ -49,13 +50,16 @@ const LIST_EN: Recommend[] = [
   {
     title: 'Introduce AntV',
     description: '✨ New player of front-end data visualization',
-    img: 'https://gw.alipayobjects.com/zos/antfincdn/Vb5TpaLRSn/089e332b-a54c-421e-a4f0-f2a3480e2f42.png',
+    img:
-    href: 'https://medium.com/ant-design/introduce-antv-a-new-player-in-data-visualization-90ca999cfb08',
+      'https://gw.alipayobjects.com/zos/antfincdn/Vb5TpaLRSn/089e332b-a54c-421e-a4f0-f2a3480e2f42.png',
+    href:
+      'https://medium.com/ant-design/introduce-antv-a-new-player-in-data-visualization-90ca999cfb08',
   },
   {
     title: 'G2Plot: a charting library',
     description: '📊 A charting library based on the grammar of graphics',
-    img: 'https://gw.alipayobjects.com/zos/antfincdn/NBwf%24mYoDf/d100a715-d763-4bc5-b801-23b7f56b665d.png',
+    img:
+      'https://gw.alipayobjects.com/zos/antfincdn/NBwf%24mYoDf/d100a715-d763-4bc5-b801-23b7f56b665d.png',
     href: 'https://github.com/antvis/G2Plot',
   },
 ];