chore: sync ant-design v4.16.0 (#1569)

components/badge/style/index.less

@@ -62,6 +62,10 @@
     right: 0;
     transform: translate(50%, -50%);
     transform-origin: 100% 0%;
+
+    &.@{iconfont-css-prefix}-spin {
+      animation: antBadgeLoadingCircle 1s infinite linear;
+    }
   }
 
   &-status {
@@ -244,5 +248,16 @@
   }
 }
 
+@keyframes antBadgeLoadingCircle {
+  0% {
+    transform-origin: 50%;
+  }
+
+  100% {
+    transform: translate(50%, -50%) rotate(360deg);
+    transform-origin: 50%;
+  }
+}
+
 @import './ribbon';
 @import './rtl';

components/button/style/index.less

@@ -237,9 +237,10 @@
 
 a.@{btn-prefix-cls} {
   // Fixing https://github.com/ant-design/ant-design/issues/12978
+  // https://github.com/ant-design/ant-design/issues/29978
   // It is a render problem of chrome, which is only happened in the codesandbox demo
   // 0.1px for padding-top solution works and I don't why
-  padding-top: 0.1px;
+  padding-top: 0.01px !important;
   line-height: @btn-height-base - 2px;
 
   &-lg {

components/checkbox/style/mixin.less

@@ -151,6 +151,13 @@
     line-height: unset;
     cursor: pointer;
 
+    &::after {
+      display: inline-block;
+      width: 0;
+      overflow: hidden;
+      content: '\a0';
+    }
+
     &.@{checkbox-prefix-cls}-wrapper-disabled {
       cursor: not-allowed;
     }

components/collapse/style/index.less

@@ -24,7 +24,6 @@
     > .@{collapse-prefix-cls}-header {
       position: relative;
       padding: @collapse-header-padding;
-      padding-left: @collapse-header-padding-extra;
       color: @heading-color;
       line-height: @line-height-base;
       cursor: pointer;
@@ -32,17 +31,10 @@
       .clearfix();
 
       .@{collapse-prefix-cls}-arrow {
-        .iconfont-mixin();
-
-        position: absolute;
-        top: ((@font-size-base * @line-height-base - @font-size-sm) / 2);
-        left: @collapse-header-arrow-left;
         display: inline-block;
-        padding: @collapse-header-padding;
+        margin-right: 12px;
-        padding-right: 0;
-        padding-bottom: 0;
-        padding-left: 0;
         font-size: @font-size-sm;
+        vertical-align: -1px;
 
         & svg {
           transition: transform 0.24s;

components/descriptions/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';

components/dropdown/style/index.less

@@ -43,7 +43,8 @@
   }
 
   &-hidden,
-  &-menu-hidden {
+  &-menu-hidden,
+  &-menu-submenu-hidden {
     display: none;
   }
 

components/form/style/components.less

@@ -61,7 +61,9 @@
     width: 100%;
   }
 
-  // Don't impact select inside input group
+  // Don't impact select inside input group and calendar header select
+  .@{ant-prefix}-picker-calendar-year-select,
+  .@{ant-prefix}-picker-calendar-month-select,
   .@{ant-prefix}-input-group .@{ant-prefix}-select,
   .@{ant-prefix}-input-group .@{ant-prefix}-cascader-picker {
     width: auto;

components/form/style/mixin.less

@@ -20,16 +20,22 @@
   }
 
   .@{ant-prefix}-input-disabled {
-    background-color: @input-disabled-bg;
+    &,
-    border-color: @input-border-color;
+    &:hover {
+      background-color: @input-disabled-bg;
+      border-color: @input-border-color;
+    }
   }
 
   .@{ant-prefix}-input-affix-wrapper-disabled {
-    background-color: @input-disabled-bg;
+    &,
-    border-color: @input-border-color;
+    &:hover {
+      background-color: @input-disabled-bg;
+      border-color: @input-border-color;
 
-    input:focus {
+      input:focus {
-      box-shadow: none !important;
+        box-shadow: none !important;
+      }
     }
   }
 

components/form/style/status.less

@@ -182,7 +182,9 @@
     .@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
       &.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input)
         .@{ant-prefix}-select-selector {
+        background-color: inherit;
         border: 0;
+        box-shadow: none;
       }
     }
 
@@ -221,9 +223,18 @@
       }
     }
 
-    .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
+    // cascader
-      background-color: @form-error-input-bg;
+    .@{ant-prefix}-cascader-picker {
-      .active(@error-color);
+      &:hover
+        .@{ant-prefix}-cascader-picker-label:hover
+        + .@{ant-prefix}-cascader-input.@{ant-prefix}-input {
+        border-color: @error-color;
+      }
+
+      &:focus .@{ant-prefix}-cascader-input {
+        background-color: @form-error-input-bg;
+        .active(@error-color);
+      }
     }
 
     // transfer

components/layout/style/index.less

@@ -2,6 +2,7 @@
 @import '../../style/mixins/index';
 
 @layout-prefix-cls: ~'@{ant-prefix}-layout';
+@layout-menu-prefix-cls: ~'@{ant-prefix}-menu';
 
 .@{layout-prefix-cls} {
   display: flex;
@@ -66,6 +67,10 @@
       // https://github.com/ant-design/ant-design/issues/7967
       // solution from https://stackoverflow.com/a/33132624/3040605
       padding-top: 0.1px;
+
+      .@{layout-menu-prefix-cls}.@{layout-menu-prefix-cls}-inline-collapsed {
+        width: auto;
+      }
     }
 
     &-has-trigger {

components/menu/style/index.less

@@ -3,6 +3,13 @@
 @import './status';
 
 @menu-prefix-cls: ~'@{ant-prefix}-menu';
+@menu-animation-duration-normal: 0.15s;
+
+.accessibility-focus() {
+  box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+}
+
+// TODO: Should remove icon style compatible in v5
 
 // default theme
 .@{menu-prefix-cls} {
@@ -18,9 +25,14 @@
   background: @menu-bg;
   outline: none;
   box-shadow: @box-shadow-base;
-  transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
+  transition: background @animation-duration-slow,
+    width @animation-duration-slow cubic-bezier(0.2, 0, 0, 1) 0s;
   .clearfix();
 
+  &&-root:focus-visible {
+    .accessibility-focus();
+  }
+
   ul,
   ol {
     margin: 0;
@@ -28,7 +40,8 @@
     list-style: none;
   }
 
-  &-hidden {
+  &-hidden,
+  &-submenu-hidden {
     display: none;
   }
 
@@ -38,16 +51,18 @@
     color: @menu-item-group-title-color;
     font-size: @menu-item-group-title-font-size;
     line-height: @menu-item-group-height;
-    transition: all 0.3s;
+    transition: all @animation-duration-slow;
   }
 
   &-horizontal &-submenu {
-    transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out;
+    transition: border-color @animation-duration-slow @ease-in-out,
+      background @animation-duration-slow @ease-in-out;
   }
   &-submenu,
   &-submenu-inline {
-    transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out,
+    transition: border-color @animation-duration-slow @ease-in-out,
-      padding 0.15s @ease-in-out;
+      background @animation-duration-slow @ease-in-out,
+      padding @menu-animation-duration-normal @ease-in-out;
   }
 
   &-submenu-selected {
@@ -61,7 +76,8 @@
 
   &-submenu &-sub {
     cursor: initial;
-    transition: background 0.3s @ease-in-out, padding 0.3s @ease-in-out;
+    transition: background @animation-duration-slow @ease-in-out,
+      padding @animation-duration-slow @ease-in-out;
   }
 
   &-item a {
@@ -172,7 +188,7 @@
 
   &-horizontal &-item,
   &-horizontal &-submenu-title {
-    transition: border-color 0.3s, background 0.3s;
+    transition: border-color @animation-duration-slow, background @animation-duration-slow;
   }
 
   &-item,
@@ -183,26 +199,39 @@
     padding: @menu-item-padding;
     white-space: nowrap;
     cursor: pointer;
-    transition: border-color 0.3s, background 0.3s, padding 0.15s @ease-in-out;
+    transition: border-color @animation-duration-slow, background @animation-duration-slow,
+      padding @animation-duration-slow @ease-in-out;
 
     .@{menu-prefix-cls}-item-icon,
     .@{iconfont-css-prefix} {
       min-width: 14px;
-      margin-right: @menu-icon-margin-right;
       font-size: @menu-icon-size;
-      transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out, color 0.3s;
+      transition: font-size @menu-animation-duration-normal @ease-out,
+        margin @animation-duration-slow @ease-in-out, color @animation-duration-slow;
       + span {
+        margin-left: @menu-icon-margin-right;
         opacity: 1;
-        transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out, color 0.3s;
+        // transition: opacity @animation-duration-slow @ease-in-out,
+        //   width @animation-duration-slow @ease-in-out, color @animation-duration-slow;
+        transition: opacity @animation-duration-slow @ease-in-out, margin @animation-duration-slow,
+          color @animation-duration-slow;
       }
     }
 
+    .@{menu-prefix-cls}-item-icon.svg {
+      vertical-align: -0.125em;
+    }
+
     &.@{menu-prefix-cls}-item-only-child {
       > .@{iconfont-css-prefix},
       > .@{menu-prefix-cls}-item-icon {
         margin-right: 0;
       }
     }
+
+    &:focus-visible {
+      .accessibility-focus();
+    }
   }
 
   & > &-item-divider {
@@ -248,7 +277,7 @@
       background-color: @menu-bg;
       border-radius: @border-radius-base;
       &-submenu-title::after {
-        transition: transform 0.3s @ease-in-out;
+        transition: transform @animation-duration-slow @ease-in-out;
       }
     }
 
@@ -264,10 +293,11 @@
       width: 10px;
       color: @menu-item-color;
       transform: translateY(-50%);
-      transition: transform 0.3s @ease-in-out;
+      transition: transform @animation-duration-slow @ease-in-out;
     }
 
     &-arrow {
+      // →
       &::before,
       &::after {
         position: absolute;
@@ -275,8 +305,9 @@
         height: 1.5px;
         background-color: currentColor;
         border-radius: 2px;
-        transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out, top 0.3s @ease-in-out,
+        transition: background @animation-duration-slow @ease-in-out,
-          color 0.3s @ease-in-out;
+          transform @animation-duration-slow @ease-in-out, top @animation-duration-slow @ease-in-out,
+          color @animation-duration-slow @ease-in-out;
         content: '';
       }
       &::before {
@@ -292,7 +323,9 @@
       color: @menu-highlight-color;
     }
 
+    .@{menu-prefix-cls}-inline-collapsed &-arrow,
     &-inline &-arrow {
+      // ↓
       &::before {
         transform: rotate(-45deg) translateX(2.5px);
       }
@@ -306,6 +339,7 @@
     }
 
     &-open&-inline > &-title > &-arrow {
+      // ↑
       transform: translateY(-2px);
       &::after {
         transform: rotate(-45deg) translateX(-2.5px);
@@ -398,7 +432,8 @@
         border-right: @menu-item-active-border-width solid @menu-highlight-color;
         transform: scaleY(0.0001);
         opacity: 0;
-        transition: transform 0.15s @ease-out, opacity 0.15s @ease-out;
+        transition: transform @menu-animation-duration-normal @ease-out,
+          opacity @menu-animation-duration-normal @ease-out;
         content: '';
       }
     }
@@ -431,6 +466,7 @@
   }
 
   &-vertical {
+    .@{menu-prefix-cls}-item-group-list .@{menu-prefix-cls}-submenu-title,
     .@{menu-prefix-cls}-submenu-title {
       padding-right: 34px;
     }
@@ -443,7 +479,8 @@
       &::after {
         transform: scaleY(1);
         opacity: 1;
-        transition: transform 0.15s @ease-in-out, opacity 0.15s @ease-in-out;
+        transition: transform @menu-animation-duration-normal @ease-in-out,
+          opacity @menu-animation-duration-normal @ease-in-out;
       }
     }
 
@@ -452,13 +489,37 @@
       width: ~'calc(100% + 1px)';
     }
 
+    .@{menu-prefix-cls}-item-group-list .@{menu-prefix-cls}-submenu-title,
     .@{menu-prefix-cls}-submenu-title {
       padding-right: 34px;
     }
+
+    // Motion enhance for first level
+    &.@{menu-prefix-cls}-root {
+      .@{menu-prefix-cls}-item,
+      .@{menu-prefix-cls}-submenu-title {
+        display: flex;
+        align-items: center;
+        transition: border-color @animation-duration-slow, background @animation-duration-slow,
+          padding 0.1s @ease-out;
+
+        > .@{menu-prefix-cls}-title-content {
+          flex: auto;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        > * {
+          flex: none;
+        }
+      }
+    }
   }
 
-  &-inline-collapsed {
+  &&-inline-collapsed {
     width: @menu-collapsed-width;
+
     > .@{menu-prefix-cls}-item,
     > .@{menu-prefix-cls}-item-group
       > .@{menu-prefix-cls}-item-group-list
@@ -471,8 +532,9 @@
       left: 0;
       padding: 0 ~'calc(50% - @{menu-icon-size-lg} / 2)';
       text-overflow: clip;
+
       .@{menu-prefix-cls}-submenu-arrow {
-        display: none;
+        opacity: 0;
       }
 
       .@{menu-prefix-cls}-item-icon,
@@ -482,7 +544,6 @@
         line-height: @menu-item-height;
         + span {
           display: inline-block;
-          max-width: 0;
           opacity: 0;
         }
       }

components/modal/style/modal.less

@@ -93,7 +93,7 @@
       @modal-footer-border-color-split;
     border-radius: 0 0 @border-radius-base @border-radius-base;
 
-    .@{ant-prefix}-btn + .@{ant-prefix}-btn {
+    .@{ant-prefix}-btn + .@{ant-prefix}-btn:not(.@{ant-prefix}-dropdown-trigger) {
       margin-bottom: 0;
       margin-left: 8px;
     }

components/notification/style/index.less

@@ -31,14 +31,19 @@
     cursor: pointer;
   }
 
-  &-hook-holder,
+  &-hook-holder {
+    position: relative;
+  }
+
   &-notice {
     position: relative;
     width: @notification-width;
     max-width: ~'calc(100vw - @{notification-margin-edge} * 2)';
     margin-bottom: @notification-margin-bottom;
     margin-left: auto;
+    padding: @notification-padding;
     overflow: hidden;
+    line-height: @line-height-base;
     word-wrap: break-word;
     background: @notification-bg;
     border-radius: @border-radius-base;
@@ -49,16 +54,6 @@
       margin-right: auto;
       margin-left: 0;
     }
-  }
-
-  &-hook-holder > &-notice {
-    margin-bottom: 0;
-    box-shadow: none;
-  }
-
-  &-notice {
-    padding: @notification-padding;
-    line-height: @line-height-base;
 
     &-message {
       margin-bottom: 8px;

components/page-header/style/index.less

@@ -111,7 +111,8 @@
       }
 
       .@{ant-prefix}-tabs-tab {
-        padding: @tabs-horizontal-padding-sm;
+        padding-top: @padding-xs;
+        padding-bottom: @padding-xs;
         font-size: @page-header-tabs-tab-font-size;
       }
     }

components/radio/style/index.less

@@ -32,6 +32,13 @@
   align-items: baseline;
   margin-right: @radio-wrapper-margin-right;
   cursor: pointer;
+
+  &::after {
+    display: inline-block;
+    width: 0;
+    overflow: hidden;
+    content: '\a0';
+  }
 }
 
 .@{radio-prefix-cls} {
@@ -77,7 +84,7 @@
       position: absolute;
       top: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width;
       left: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width;
-      display: table;
+      display: block;
       width: @radio-dot-size;
       height: @radio-dot-size;
       background-color: @radio-dot-color;

components/rate/style/index.less

@@ -27,21 +27,22 @@
     display: inline-block;
     color: inherit;
     cursor: pointer;
-    transition: all 0.3s;
 
     &:not(:last-child) {
       margin-right: 8px;
     }
 
     > div {
-      &:focus {
+      transition: all 0.3s;
-        outline: 0;
-      }
 
       &:hover,
-      &:focus {
+      &:focus-visible {
         transform: @rate-star-hover-scale;
       }
+
+      &:focus:not(:focus-visible) {
+        outline: 0;
+      }
     }
 
     &-first,

components/steps/style/progress.less

@@ -10,6 +10,7 @@
   }
 
   &.@{steps-prefix-cls}-horizontal .@{steps-prefix-cls}-item:first-child {
+    padding-bottom: 4px;
     padding-left: 4px;
   }
 

components/steps/style/rtl.less

@@ -242,3 +242,10 @@
     }
   }
 }
+
+// RTL Steps with progress
+.@{steps-prefix-cls}-rtl.@{steps-prefix-cls}-with-progress.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
+  .@{steps-prefix-cls}-item:first-child.@{steps-prefix-cls}-item-active {
+    padding-right: 4px;
+  }
+}

components/style/core/global.less

@@ -239,7 +239,6 @@ a {
   &[disabled] {
     color: @disabled-color;
     cursor: not-allowed;
-    pointer-events: none;
   }
 }
 
@@ -323,12 +322,6 @@ caption {
   caption-side: bottom;
 }
 
-th {
-  // Matches default `<td>` alignment by inheriting from the `<body>`, or the
-  // closest parent with a set `text-align`.
-  text-align: inherit;
-}
-
 //
 // Forms
 //

components/style/themes/dark.less

@@ -310,6 +310,7 @@
 @table-header-bg: #1d1d1d;
 @table-body-sort-bg: fade(@white, 1%);
 @table-row-hover-bg: #262626;
+@table-header-cell-split-color: fade(@white, 8%);
 @table-header-sort-bg: #262626;
 @table-header-filter-active-bg: #434343;
 @table-header-sort-active-bg: #303030;

components/style/themes/default.less

@@ -462,7 +462,7 @@
 
 // Anchor
 // ---
-@anchor-bg: @component-background;
+@anchor-bg: transparent;
 @anchor-border-color: @border-color-split;
 @anchor-link-top: 7px;
 @anchor-link-left: 16px;
@@ -609,11 +609,12 @@
 @table-font-size: @font-size-base;
 @table-font-size-md: @table-font-size;
 @table-font-size-sm: @table-font-size;
+@table-header-cell-split-color: rgba(0, 0, 0, 0.06);
 // Sorter
 // Legacy: `table-header-sort-active-bg` is used for hover not real active
-@table-header-sort-active-bg: darken(@table-header-bg, 3%);
+@table-header-sort-active-bg: rgba(0, 0, 0, 0.04);
 // Filter
-@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
+@table-header-filter-active-bg: rgba(0, 0, 0, 0.04);
 @table-filter-btns-bg: inherit;
 @table-filter-dropdown-bg: @component-background;
 @table-expand-icon-bg: @component-background;

components/table/style/bordered.less

@@ -32,6 +32,12 @@
           > tr:not(:last-child) > th {
             border-bottom: @border-width-base @border-style-base @table-border-color;
           }
+
+          > tr > th {
+            &::before {
+              background-color: transparent !important;
+            }
+          }
         }
 
         // Fixed right should provides additional border

components/table/style/index.less

@@ -8,8 +8,7 @@
 @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
 @table-header-icon-color: #bfbfbf;
 @table-header-icon-color-hover: darken(@table-header-icon-color, 10%);
-@table-header-sort-active-filter-bg: lighten(@table-header-sort-active-bg, 2%);
+@table-sticky-zindex: (@zindex-table-fixed + 1);
-@table-sticky-zindex: calc(@zindex-table-fixed + 1);
 @table-sticky-scroll-bar-active-bg: fade(@table-sticky-scroll-bar-bg, 80%);
 
 .@{table-prefix-cls}-wrapper {
@@ -23,7 +22,7 @@
   position: relative;
   font-size: @table-font-size;
   background: @table-bg;
-  border-radius: @border-radius-base;
+  border-radius: @table-border-radius-base;
 
   // https://github.com/ant-design/ant-design/issues/17611
   table {
@@ -79,6 +78,7 @@
   &-thead {
     > tr {
       > th {
+        position: relative;
         color: @table-header-color;
         font-weight: 500;
         text-align: left;
@@ -89,6 +89,18 @@
         &[colspan]:not([colspan='1']) {
           text-align: center;
         }
+
+        &:not(:last-child):not(.@{table-prefix-cls}-selection-column):not(.@{table-prefix-cls}-row-expand-icon-cell):not([colspan])::before {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          width: 1px;
+          height: 1.6em;
+          background-color: @table-header-cell-split-color;
+          transform: translateY(-50%);
+          transition: background-color 0.3s;
+          content: '';
+        }
       }
     }
 
@@ -107,7 +119,8 @@
         transition: background 0.3s;
 
         // ========================= Nest Table ===========================
-        > .@{table-prefix-cls}-wrapper:only-child {
+        > .@{table-prefix-cls}-wrapper:only-child,
+        > .@{table-prefix-cls}-expanded-row-fixed > .@{table-prefix-cls}-wrapper:only-child {
           .@{table-prefix-cls} {
             margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical (@table-padding-horizontal +
                   ceil(@font-size-sm * 1.4));
@@ -146,7 +159,13 @@
   }
 
   // =========================== Summary ============================
-  tfoot {
+  &-summary {
+    background: @table-bg;
+
+    div& {
+      box-shadow: 0 -@border-width-base 0 @table-border-color;
+    }
+
     > tr {
       > th,
       > td {
@@ -162,6 +181,12 @@
 
   &-pagination {
     display: flex;
+    flex-wrap: wrap;
+    row-gap: @padding-xs;
+
+    > * {
+      flex: none;
+    }
 
     &-left {
       justify-content: flex-start;
@@ -182,47 +207,52 @@
 
   // ============================ Sorter ============================
   &-thead th.@{table-prefix-cls}-column-has-sorters {
-    padding: 0;
     cursor: pointer;
     transition: all 0.3s;
 
     &:hover {
       background: @table-header-sort-active-bg;
 
-      .@{table-prefix-cls}-filter-trigger-container {
+      &::before {
-        background: @table-header-sort-active-filter-bg;
+        background-color: transparent !important;
       }
     }
   }
 
   &-thead th.@{table-prefix-cls}-column-sort {
     background: @table-header-sort-bg;
+
+    &::before {
+      background-color: transparent !important;
+    }
   }
+
   td&-column-sort {
     background: @table-body-sort-bg;
   }
 
-  &-column-sorters-with-tooltip {
-    display: inline-block;
-    width: 100%;
-  }
-
   &-column-sorters {
-    display: inline-flex;
+    display: flex;
+    flex: auto;
     align-items: center;
-    padding: @table-padding-vertical @table-padding-horizontal;
+    justify-content: space-between;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      content: '';
+    }
   }
 
   &-column-sorter {
-    margin-top: 0.15em;
-    margin-bottom: -0.15em;
-    margin-left: @padding-xs;
     color: @table-header-icon-color;
-
+    font-size: 0;
-    &-full {
+    transition: color 0.3s;
-      margin-top: -0.2em;
-      margin-bottom: 0;
-    }
 
     &-inner {
       display: inline-flex;
@@ -244,65 +274,31 @@
     }
   }
 
+  &-column-sorters:hover &-column-sorter {
+    color: darken(@table-header-icon-color, 10%);
+  }
+
   // ============================ Filter ============================
   &-filter-column {
     display: flex;
-    align-items: center;
+    justify-content: space-between;
-    margin: -@table-padding-vertical -@table-padding-horizontal;
-  }
-
-  &-filter-column-title {
-    flex: auto;
-    padding: @table-padding-vertical 2.3em @table-padding-vertical @table-padding-horizontal;
-  }
-
-  // Remove padding when sorter also provided
-  &-thead tr th.@{table-prefix-cls}-column-has-sorters {
-    .@{table-prefix-cls}-filter-column {
-      margin: 0;
-    }
-
-    .@{table-prefix-cls}-filter-column-title {
-      padding: 0 2.3em 0 0;
-    }
-  }
-
-  &-filter-trigger-container {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    flex: none;
-    align-items: stretch;
-    align-self: stretch;
-    cursor: pointer;
-    transition: background-color 0.3s;
-
-    &-open,
-    &:hover,
-    .@{table-prefix-cls}-thead th.@{table-prefix-cls}-column-has-sorters:hover &:hover {
-      background: @table-header-filter-active-bg;
-    }
   }
 
   &-filter-trigger {
-    display: block;
+    position: relative;
-    width: 2.3em;
+    display: flex;
+    align-items: center;
+    margin: -4px (-@table-padding-horizontal / 2) -4px 4px;
+    padding: 0 4px;
     color: @table-header-icon-color;
     font-size: @font-size-sm;
-    transition: color 0.3s;
+    border-radius: @border-radius-base;
+    cursor: pointer;
+    transition: all 0.3s;
 
-    .@{iconfont-css-prefix} {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    .@{table-prefix-cls}-filter-trigger-container-open &,
     &:hover {
       color: @text-color-secondary;
+      background: @table-header-filter-active-bg;
     }
 
     &.active {
@@ -356,10 +352,14 @@
   }
 
   // ========================== Selections ==========================
-  .@{table-prefix-cls}-selection-col {
+  &-selection-col {
     width: @table-selection-column-width;
   }
 
+  &-bordered &-selection-col {
+    width: @table-selection-column-width + 18px;
+  }
+
   table tr th&-selection-column,
   table tr td&-selection-column {
     padding-right: @padding-xs;
@@ -371,6 +371,10 @@
     }
   }
 
+  table tr th&-selection-column::after {
+    background-color: transparent !important;
+  }
+
   &-selection {
     position: relative;
     display: inline-flex;
@@ -427,7 +431,6 @@
     border-radius: @border-radius-base;
     outline: none;
     transform: scale((unit(@checkbox-size) / unit(@expand-icon-size)));
-    transform-origin: bottom;
     transition: all 0.3s;
     user-select: none;
     @expand-icon-size: ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2)) * 2 +
@@ -548,6 +551,7 @@
     content: '';
     pointer-events: none;
   }
+
   &-cell-fix-right-first::after,
   &-cell-fix-right-last::after {
     position: absolute;
@@ -595,6 +599,10 @@
     .@{table-prefix-cls}-cell-fix-left-last::after {
       box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
     }
+
+    .@{table-prefix-cls}-cell-fix-left-last::before {
+      background-color: transparent !important;
+    }
   }
 
   &-ping-right {
@@ -612,7 +620,7 @@
     }
   }
   &-sticky {
-    &-header {
+    &-holder {
       position: sticky;
       z-index: @table-sticky-zindex;
     }

components/table/style/size.less

@@ -13,22 +13,8 @@
       padding: @padding-vertical @padding-horizontal;
     }
 
-    .@{table-prefix-cls}-thead {
+    .@{table-prefix-cls}-filter-trigger {
-      th.@{table-prefix-cls}-column-has-sorters {
+      margin-right: -(@padding-horizontal / 2);
-        padding: 0;
-      }
-
-      .@{table-prefix-cls}-filter-column {
-        margin: -@padding-vertical -@padding-horizontal;
-      }
-
-      .@{table-prefix-cls}-filter-column-title {
-        padding: @padding-vertical 2.3em @padding-vertical @padding-horizontal;
-      }
-
-      .@{table-prefix-cls}-column-sorters {
-        padding: @padding-vertical @padding-horizontal;
-      }
     }
 
     .@{table-prefix-cls}-expanded-row-fixed {

components/tabs/style/position.less

@@ -146,6 +146,7 @@
 
       .@{tab-prefix-cls}-nav-list,
       .@{tab-prefix-cls}-nav-operations {
+        flex: 1 0 auto; // fix safari scroll problem
         flex-direction: column;
       }
     }

components/transfer/style/index.less

@@ -209,10 +209,6 @@
     &-footer {
       border-top: @border-width-base @border-style-base @border-color-split;
     }
-
-    &-checkbox .@{ant-prefix}-checkbox {
-      top: 0;
-    }
   }
 
   &-operation {
@@ -221,7 +217,6 @@
     flex-direction: column;
     align-self: center;
     margin: 0 8px;
-    overflow: hidden;
     vertical-align: middle;
 
     .@{ant-prefix}-btn {

components/typography/style/index.less

@@ -259,9 +259,12 @@
   }
 
   // ============ Ellipsis ============
+  &-single-line {
+    white-space: nowrap;
+  }
+
   &-ellipsis-single-line {
     overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
 
     // https://blog.csdn.net/iefreer/article/details/50421025