From 40893681c543a6081c6def788ed7ae8e110ac5dd Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sat, 24 Oct 2020 21:36:05 +0800
Subject: [PATCH] test: update grid snap

---
 .../__tests__/__snapshots__/demo.test.js.snap | 103 +++++++++---------
 .../__tests__/__snapshots__/demo.test.js.snap |  38 ++++++-
 .../__tests__/__snapshots__/demo.test.js.snap |  24 ++--
 components/grid/style/index.less              |  31 ++----
 components/grid/style/mixin.less              |  52 +--------
 components/grid/style/rtl.less                |  68 ++++++++++++
 components/vc-tree-select/src/SearchInput.jsx |   1 +
 7 files changed, 179 insertions(+), 138 deletions(-)
 create mode 100644 components/grid/style/rtl.less

diff --git a/components/empty/__tests__/__snapshots__/demo.test.js.snap b/components/empty/__tests__/__snapshots__/demo.test.js.snap
index c8ad0a5a7..bc83ee40e 100644
--- a/components/empty/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/empty/__tests__/__snapshots__/demo.test.js.snap
@@ -2,17 +2,17 @@
 
 exports[`renders ./antdv-demo/docs/empty/demo/basic.md correctly 1`] = `
 <div class="ant-empty">
-  <div class="ant-empty-image"><svg width="184" height="152" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg">
+  <div class="ant-empty-image"><svg class="ant-empty-img-default" width="184" height="152" viewBox="0 0 184 152">
       <g fill="none" fill-rule="evenodd">
         <g transform="translate(24 31.67)">
-          <ellipse fill-opacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse>
-          <path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z" fill="#AEB8C2"></path>
-          <path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" fill="url(#linearGradient-1)" transform="translate(13.56)"></path>
-          <path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"></path>
-          <path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z" fill="#DCE0E6"></path>
+          <ellipse class="ant-empty-img-default-ellipse" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse>
+          <path class="ant-empty-img-default-path-1" d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"></path>
+          <path class="ant-empty-img-default-path-2" d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" transform="translate(13.56)"></path>
+          <path class="ant-empty-img-default-path-3" d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"></path>
+          <path class="ant-empty-img-default-path-4" d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"></path>
         </g>
-        <path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z" fill="#DCE0E6"></path>
-        <g transform="translate(149.65 15.383)" fill="#FFF">
+        <path class="ant-empty-img-default-path-5" d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"></path>
+        <g class="ant-empty-img-default-g" transform="translate(149.65 15.383)">
           <ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse>
           <path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path>
         </g>
@@ -32,20 +32,21 @@ exports[`renders ./antdv-demo/docs/empty/demo/config-provider.md correctly 1`] =
 </div>
 <div class="config-provider">
   <h3>Select</h3>
-  <!---->
-  <div style="width: 200px;" class="ant-select ant-select-enabled" tabindex="0">
-    <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
-      <div class="ant-select-selection__rendered">
-        <!---->
-        <!---->
-      </div>
-      <!----><span class="ant-select-arrow" style="user-select: none;" unselectable="on"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
-    </div>
+  <div class="ant-select ant-select-single ant-select-show-arrow" style="width: 200px;">
+    <!---->
+    <!---->
+    <div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" type="search"></span>
+      <!----><span class="ant-select-selection-placeholder"><!----></span>
+    </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+    <!---->
   </div>
   <h3>TreeSelect</h3>
-  <!----><span style="width: 200px;" class="ant-select ant-select-enabled" role="combobox" aria-haspopup="listbox" tabindex="0"><span class="ant-select-selection ant-select-selection--single"><span class="ant-select-selection__rendered"><span class="ant-select-selection__placeholder"><!----></span></span>
-  <!----><span class="ant-select-arrow" style="outline: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
-  <!----></span></span>
+  <!---->
+  <div style="width: 200px;" class="ant-select ant-select-single ant-select-show-arrow" role="combobox" aria-haspopup="listbox" tabindex="0"><span class="ant-select-selector"><span class="ant-select-selection-search"><input type="text" class="ant-select-selection-search-input" aria-label="filter select" aria-autocomplete="list" aria-multiline="false"><!----></span>
+    <!---->
+    <!----></span><span class="ant-select-arrow" style="outline: none; user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+    <!---->
+  </div>
   <h3>Cascader</h3>
   <!----><span class="ant-cascader-picker ant-cascader-picker-show-search" style="width: 200px;" tabindex="0"><span class="ant-cascader-picker-label"></span><input placeholder="Please select" type="text" autocomplete="off" class="ant-input ant-cascader-input ">
   <!----><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
@@ -58,13 +59,13 @@ exports[`renders ./antdv-demo/docs/empty/demo/config-provider.md correctly 1`] =
       <div class="ant-transfer-list-body">
         <!---->
         <div class="ant-transfer-list-body-not-found">
-          <div class="ant-empty ant-empty-normal ant-empty-small">
-            <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+          <div class="ant-empty ant-empty-small ant-empty-normal">
+            <div class="ant-empty-image"><svg class="ant-empty-img-default" width="64" height="41" viewBox="0 0 64 41">
                 <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
-                  <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
-                  <g fill-rule="nonzero" stroke="#D9D9D9">
+                  <ellipse class="ant-empty-img-default-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+                  <g class="ant-empty-img-default-g" fill-rule="nonzero" stroke="#D9D9D9">
                     <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
-                    <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
+                    <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-default-path"></path>
                   </g>
                 </g>
               </svg></div>
@@ -83,13 +84,13 @@ exports[`renders ./antdv-demo/docs/empty/demo/config-provider.md correctly 1`] =
       <div class="ant-transfer-list-body">
         <!---->
         <div class="ant-transfer-list-body-not-found">
-          <div class="ant-empty ant-empty-normal ant-empty-small">
-            <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+          <div class="ant-empty ant-empty-small ant-empty-normal">
+            <div class="ant-empty-image"><svg class="ant-empty-img-default" width="64" height="41" viewBox="0 0 64 41">
                 <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
-                  <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
-                  <g fill-rule="nonzero" stroke="#D9D9D9">
+                  <ellipse class="ant-empty-img-default-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+                  <g class="ant-empty-img-default-g" fill-rule="nonzero" stroke="#D9D9D9">
                     <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
-                    <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
+                    <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-default-path"></path>
                   </g>
                 </g>
               </svg></div>
@@ -133,12 +134,12 @@ exports[`renders ./antdv-demo/docs/empty/demo/config-provider.md correctly 1`] =
         </div>
         <div class="ant-table-placeholder">
           <div class="ant-empty ant-empty-normal">
-            <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+            <div class="ant-empty-image"><svg class="ant-empty-img-default" width="64" height="41" viewBox="0 0 64 41">
                 <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
-                  <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
-                  <g fill-rule="nonzero" stroke="#D9D9D9">
+                  <ellipse class="ant-empty-img-default-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+                  <g class="ant-empty-img-default-g" fill-rule="nonzero" stroke="#D9D9D9">
                     <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
-                    <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
+                    <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-default-path"></path>
                   </g>
                 </g>
               </svg></div>
@@ -163,12 +164,12 @@ exports[`renders ./antdv-demo/docs/empty/demo/config-provider.md correctly 1`] =
     <div class="ant-spin-container">
       <div class="ant-list-empty-text">
         <div class="ant-empty ant-empty-normal">
-          <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+          <div class="ant-empty-image"><svg class="ant-empty-img-default" width="64" height="41" viewBox="0 0 64 41">
               <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
-                <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
-                <g fill-rule="nonzero" stroke="#D9D9D9">
+                <ellipse class="ant-empty-img-default-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+                <g class="ant-empty-img-default-g" fill-rule="nonzero" stroke="#D9D9D9">
                   <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
-                  <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
+                  <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-default-path"></path>
                 </g>
               </g>
             </svg></div>
@@ -196,17 +197,17 @@ exports[`renders ./antdv-demo/docs/empty/demo/customize.md correctly 1`] = `
 
 exports[`renders ./antdv-demo/docs/empty/demo/description.md correctly 1`] = `
 <div class="ant-empty">
-  <div class="ant-empty-image"><svg width="184" height="152" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg">
+  <div class="ant-empty-image"><svg class="ant-empty-img-default" width="184" height="152" viewBox="0 0 184 152">
       <g fill="none" fill-rule="evenodd">
         <g transform="translate(24 31.67)">
-          <ellipse fill-opacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse>
-          <path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z" fill="#AEB8C2"></path>
-          <path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" fill="url(#linearGradient-1)" transform="translate(13.56)"></path>
-          <path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"></path>
-          <path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z" fill="#DCE0E6"></path>
+          <ellipse class="ant-empty-img-default-ellipse" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse>
+          <path class="ant-empty-img-default-path-1" d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"></path>
+          <path class="ant-empty-img-default-path-2" d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" transform="translate(13.56)"></path>
+          <path class="ant-empty-img-default-path-3" d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"></path>
+          <path class="ant-empty-img-default-path-4" d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"></path>
         </g>
-        <path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z" fill="#DCE0E6"></path>
-        <g transform="translate(149.65 15.383)" fill="#FFF">
+        <path class="ant-empty-img-default-path-5" d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"></path>
+        <g class="ant-empty-img-default-g" transform="translate(149.65 15.383)">
           <ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse>
           <path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path>
         </g>
@@ -218,13 +219,13 @@ exports[`renders ./antdv-demo/docs/empty/demo/description.md correctly 1`] = `
 `;
 
 exports[`renders ./antdv-demo/docs/empty/demo/simple.md correctly 1`] = `
-<div class="ant-empty">
-  <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+<div class="ant-empty ant-empty-normal">
+  <div class="ant-empty-image"><svg class="ant-empty-img-default" width="64" height="41" viewBox="0 0 64 41">
       <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
-        <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
-        <g fill-rule="nonzero" stroke="#D9D9D9">
+        <ellipse class="ant-empty-img-default-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+        <g class="ant-empty-img-default-g" fill-rule="nonzero" stroke="#D9D9D9">
           <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
-          <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
+          <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-default-path"></path>
         </g>
       </g>
     </svg></div>
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index 3f08020f8..cdebf41de 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -14,7 +14,10 @@ exports[`renders ./antdv-demo/docs/form/demo/basic.md correctly 1`] = `
   <div class="ant-row ant-form-item">
     <div class="ant-col ant-col-4 ant-form-item-label"><label class="" title="Activity zone">Activity zone</label></div>
     <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><!----><div class="ant-select ant-select-enabled" tabindex="0"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" style="display: block; user-select: none;" class="ant-select-selection__placeholder">please select your zone</div><!----></div><!----><span class="ant-select-arrow" style="user-select: none;" unselectable="on"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-select ant-select-single ant-select-show-arrow"><!----><!----><div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" type="search"></span>
+        <!----><span class="ant-select-selection-placeholder">please select your zone</span>
+      </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+      <!---->
     </div>
     <!----></span>
     <!---->
@@ -72,6 +75,7 @@ exports[`renders ./antdv-demo/docs/form/demo/basic.md correctly 1`] = `
     </div>
   </div>
   <div class="ant-row ant-form-item">
+    <!---->
     <div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
       <div class="ant-form-item-control"><span class="ant-form-item-children"><button class="ant-btn ant-btn-primary" type="button"><!----><span>Create</span></button><button style="margin-left: 10px;" class="ant-btn" type="button">
           <!----><span>Cancel</span>
@@ -118,6 +122,7 @@ exports[`renders ./antdv-demo/docs/form/demo/custom-validation.md correctly 1`]
   </div>
   </div>
   <div class="ant-row ant-form-item">
+    <!---->
     <div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
       <div class="ant-form-item-control"><span class="ant-form-item-children"><button class="ant-btn ant-btn-primary" type="submit"><!----><span>Submit</span></button><button style="margin-left: 10px;" class="ant-btn" type="button">
           <!----><span>Reset</span>
@@ -134,6 +139,7 @@ exports[`renders ./antdv-demo/docs/form/demo/custom-validation.md correctly 1`]
 exports[`renders ./antdv-demo/docs/form/demo/dynamic-form-item.md correctly 1`] = `
 <form class="ant-form ant-form-horizontal">
   <div class="ant-row ant-form-item">
+    <!---->
     <div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4 ant-form-item-control-wrapper">
       <div class="ant-form-item-control"><span class="ant-form-item-children"><button style="width: 60%;" class="ant-btn ant-btn-dashed" type="button"><!----><span role="img" aria-label="plus" class="anticon anticon-plus"><svg class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span><span>Add field</span></button>
         <!----></span>
@@ -143,6 +149,7 @@ exports[`renders ./antdv-demo/docs/form/demo/dynamic-form-item.md correctly 1`]
     </div>
   </div>
   <div class="ant-row ant-form-item">
+    <!---->
     <div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4 ant-form-item-control-wrapper">
       <div class="ant-form-item-control"><span class="ant-form-item-children"><button class="ant-btn ant-btn-primary" type="submit"><!----><span>Submit</span></button><button style="margin-left: 10px;" class="ant-btn" type="button">
           <!----><span>Reset</span>
@@ -159,6 +166,7 @@ exports[`renders ./antdv-demo/docs/form/demo/dynamic-form-item.md correctly 1`]
 exports[`renders ./antdv-demo/docs/form/demo/horizontal-login.md correctly 1`] = `
 <form class="ant-form ant-form-inline">
   <div class="ant-row ant-form-item">
+    <!---->
     <div class="ant-col ant-form-item-control-wrapper">
       <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span style="color: rgba(0, 0, 0, 0.25);" role="img" aria-label="user" class="anticon anticon-user"><svg class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><input placeholder="Username" type="text" class="ant-input">
         <!----></span>
@@ -169,6 +177,7 @@ exports[`renders ./antdv-demo/docs/form/demo/horizontal-login.md correctly 1`] =
     </div>
   </div>
   <div class="ant-row ant-form-item">
+    <!---->
     <div class="ant-col ant-form-item-control-wrapper">
       <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span style="color: rgba(0, 0, 0, 0.25);" role="img" aria-label="lock" class="anticon anticon-lock"><svg class="" data-icon="lock" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"></path></svg></span></span><input type="password" placeholder="Password" class="ant-input">
         <!----></span>
@@ -179,6 +188,7 @@ exports[`renders ./antdv-demo/docs/form/demo/horizontal-login.md correctly 1`] =
     </div>
   </div>
   <div class="ant-row ant-form-item">
+    <!---->
     <div class="ant-col ant-form-item-control-wrapper">
       <div class="ant-form-item-control"><span class="ant-form-item-children"><button disabled="" class="ant-btn ant-btn-primary" type="submit"><!----><span>Log in</span></button>
         <!----></span>
@@ -221,6 +231,7 @@ exports[`renders ./antdv-demo/docs/form/demo/layout.md correctly 1`] = `
     </div>
   </div>
   <div class="ant-row ant-form-item">
+    <!---->
     <div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
       <div class="ant-form-item-control"><span class="ant-form-item-children"><button class="ant-btn ant-btn-primary" type="button"><!----><span>Submit</span></button>
         <!----></span>
@@ -246,7 +257,10 @@ exports[`renders ./antdv-demo/docs/form/demo/useForm-basic.md correctly 1`] = `
   <div class="ant-row ant-form-item">
     <div class="ant-col ant-col-4 ant-form-item-label"><label class="ant-form-item-required" title="Activity zone">Activity zone</label></div>
     <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><!----><div class="ant-select ant-select-enabled" tabindex="0"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" style="display: block; user-select: none;" class="ant-select-selection__placeholder">please select your zone</div><!----></div><!----><span class="ant-select-arrow" style="user-select: none;" unselectable="on"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-select ant-select-single ant-select-show-arrow"><!----><!----><div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" type="search"></span>
+        <!----><span class="ant-select-selection-placeholder">please select your zone</span>
+      </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+      <!---->
     </div>
     <!----></span>
     <!---->
@@ -265,6 +279,7 @@ exports[`renders ./antdv-demo/docs/form/demo/useForm-basic.md correctly 1`] = `
   </div>
   </div>
   <div class="ant-row ant-form-item">
+    <!---->
     <div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
       <div class="ant-form-item-control"><span class="ant-form-item-children"><button class="ant-btn ant-btn-primary" type="button"><!----><span>Create</span></button><button style="margin-left: 10px;" class="ant-btn" type="button">
           <!----><span>Reset</span>
@@ -292,7 +307,10 @@ exports[`renders ./antdv-demo/docs/form/demo/useForm-merge.md correctly 1`] = `
   <div class="ant-row ant-form-item">
     <div class="ant-col ant-col-4 ant-form-item-label"><label class="ant-form-item-required" title="Activity zone">Activity zone</label></div>
     <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><!----><div class="ant-select ant-select-enabled" tabindex="0"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" style="display: block; user-select: none;" class="ant-select-selection__placeholder">please select your zone</div><!----></div><!----><span class="ant-select-arrow" style="user-select: none;" unselectable="on"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-select ant-select-single ant-select-show-arrow"><!----><!----><div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" type="search"></span>
+        <!----><span class="ant-select-selection-placeholder">please select your zone</span>
+      </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+      <!---->
     </div>
     <!----></span>
     <!---->
@@ -311,6 +329,7 @@ exports[`renders ./antdv-demo/docs/form/demo/useForm-merge.md correctly 1`] = `
   </div>
   </div>
   <div class="ant-row error-infos ant-form-item">
+    <!---->
     <div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
       <div class="ant-form-item-control"><span class="ant-form-item-children"><button class="ant-btn ant-btn-primary" type="button"><!----><span>Create</span></button><button style="margin-left: 10px;" class="ant-btn" type="button">
           <!----><span>Reset</span>
@@ -345,6 +364,7 @@ exports[`renders ./antdv-demo/docs/form/demo/useForm-nested.md correctly 1`] = `
     </div>
   </div>
   <div class="ant-row ant-form-item">
+    <!---->
     <div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
       <div class="ant-form-item-control"><span class="ant-form-item-children"><button class="ant-btn ant-btn-primary" type="button"><!----><span>Create</span></button><button style="margin-left: 10px;" class="ant-btn" type="button">
           <!----><span>Reset</span>
@@ -372,7 +392,10 @@ exports[`renders ./antdv-demo/docs/form/demo/useForm-trigger.md correctly 1`] =
   <div class="ant-row ant-form-item">
     <div class="ant-col ant-col-4 ant-form-item-label"><label class="ant-form-item-required" title="Activity zone">Activity zone</label></div>
     <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><!----><div class="ant-select ant-select-enabled" tabindex="0"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" style="display: block; user-select: none;" class="ant-select-selection__placeholder">please select your zone</div><!----></div><!----><span class="ant-select-arrow" style="user-select: none;" unselectable="on"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-select ant-select-single ant-select-show-arrow"><!----><!----><div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" type="search"></span>
+        <!----><span class="ant-select-selection-placeholder">please select your zone</span>
+      </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+      <!---->
     </div>
     <!----></span>
     <!---->
@@ -381,6 +404,7 @@ exports[`renders ./antdv-demo/docs/form/demo/useForm-trigger.md correctly 1`] =
   </div>
   </div>
   <div class="ant-row ant-form-item">
+    <!---->
     <div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
       <div class="ant-form-item-control"><span class="ant-form-item-children"><button class="ant-btn ant-btn-primary" type="button"><!----><span>Create</span></button><button style="margin-left: 10px;" class="ant-btn" type="button">
           <!----><span>Reset</span>
@@ -408,7 +432,10 @@ exports[`renders ./antdv-demo/docs/form/demo/validation.md correctly 1`] = `
   <div class="ant-row ant-form-item">
     <div class="ant-col ant-col-4 ant-form-item-label"><label for="region" class="ant-form-item-required" title="Activity zone">Activity zone</label></div>
     <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><!----><div class="ant-select ant-select-enabled" tabindex="0"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" style="display: block; user-select: none;" class="ant-select-selection__placeholder">please select your zone</div><!----></div><!----><span class="ant-select-arrow" style="user-select: none;" unselectable="on"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-select ant-select-single ant-select-show-arrow"><!----><!----><div class="ant-select-selector"><span class="ant-select-selection-search"><input id="region" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="region_list" aria-autocomplete="list" aria-controls="region_list" aria-activedescendant="region_list_0" readonly="" unselectable="on" type="search"></span>
+        <!----><span class="ant-select-selection-placeholder">please select your zone</span>
+      </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+      <!---->
     </div>
     <!----></span>
     <!---->
@@ -466,6 +493,7 @@ exports[`renders ./antdv-demo/docs/form/demo/validation.md correctly 1`] = `
     </div>
   </div>
   <div class="ant-row ant-form-item">
+    <!---->
     <div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
       <div class="ant-form-item-control"><span class="ant-form-item-children"><button class="ant-btn ant-btn-primary" type="button"><!----><span>Create</span></button><button style="margin-left: 10px;" class="ant-btn" type="button">
           <!----><span>Reset</span>
diff --git a/components/grid/__tests__/__snapshots__/demo.test.js.snap b/components/grid/__tests__/__snapshots__/demo.test.js.snap
index 226c9cc12..ff3c49b2e 100644
--- a/components/grid/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/grid/__tests__/__snapshots__/demo.test.js.snap
@@ -20,35 +20,35 @@ exports[`renders ./antdv-demo/docs/grid/demo/basic.md correctly 1`] = `
 
 exports[`renders ./antdv-demo/docs/grid/demo/flex.md correctly 1`] = `
 <p>sub-element align left</p>
-<div class="ant-row-flex ant-row-flex-start">
+<div class="ant-row ant-row-start">
   <div class="ant-col ant-col-4"> col-4 </div>
   <div class="ant-col ant-col-4"> col-4 </div>
   <div class="ant-col ant-col-4"> col-4 </div>
   <div class="ant-col ant-col-4"> col-4 </div>
 </div>
 <p>sub-element align center</p>
-<div class="ant-row-flex ant-row-flex-center">
+<div class="ant-row ant-row-center">
   <div class="ant-col ant-col-4"> col-4 </div>
   <div class="ant-col ant-col-4"> col-4 </div>
   <div class="ant-col ant-col-4"> col-4 </div>
   <div class="ant-col ant-col-4"> col-4 </div>
 </div>
 <p>sub-element align right</p>
-<div class="ant-row-flex ant-row-flex-end">
+<div class="ant-row ant-row-end">
   <div class="ant-col ant-col-4"> col-4 </div>
   <div class="ant-col ant-col-4"> col-4 </div>
   <div class="ant-col ant-col-4"> col-4 </div>
   <div class="ant-col ant-col-4"> col-4 </div>
 </div>
 <p>sub-element monospaced arrangement</p>
-<div class="ant-row-flex ant-row-flex-space-between">
+<div class="ant-row ant-row-space-between">
   <div class="ant-col ant-col-4"> col-4 </div>
   <div class="ant-col ant-col-4"> col-4 </div>
   <div class="ant-col ant-col-4"> col-4 </div>
   <div class="ant-col ant-col-4"> col-4 </div>
 </div>
 <p>sub-element align full</p>
-<div class="ant-row-flex ant-row-flex-space-around">
+<div class="ant-row ant-row-space-around">
   <div class="ant-col ant-col-4"> col-4 </div>
   <div class="ant-col ant-col-4"> col-4 </div>
   <div class="ant-col ant-col-4"> col-4 </div>
@@ -58,7 +58,7 @@ exports[`renders ./antdv-demo/docs/grid/demo/flex.md correctly 1`] = `
 
 exports[`renders ./antdv-demo/docs/grid/demo/flex-align.md correctly 1`] = `
 <p>Align Top</p>
-<div class="ant-row-flex ant-row-flex-center ant-row-flex-top">
+<div class="ant-row ant-row-center ant-row-top">
   <div class="ant-col ant-col-4">
     <p class="height-100"> col-4 </p>
   </div>
@@ -73,7 +73,7 @@ exports[`renders ./antdv-demo/docs/grid/demo/flex-align.md correctly 1`] = `
   </div>
 </div>
 <p>Align Center</p>
-<div class="ant-row-flex ant-row-flex-space-around ant-row-flex-middle">
+<div class="ant-row ant-row-space-around ant-row-middle">
   <div class="ant-col ant-col-4">
     <p class="height-100"> col-4 </p>
   </div>
@@ -88,7 +88,7 @@ exports[`renders ./antdv-demo/docs/grid/demo/flex-align.md correctly 1`] = `
   </div>
 </div>
 <p>Align Bottom</p>
-<div class="ant-row-flex ant-row-flex-space-between ant-row-flex-bottom">
+<div class="ant-row ant-row-space-between ant-row-bottom">
   <div class="ant-col ant-col-4">
     <p class="height-100"> col-4 </p>
   </div>
@@ -106,24 +106,24 @@ exports[`renders ./antdv-demo/docs/grid/demo/flex-align.md correctly 1`] = `
 
 exports[`renders ./antdv-demo/docs/grid/demo/flex-fill.md correctly 1`] = `
 <div class="ant-divider ant-divider-horizontal ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text"> Percentage columns </span></div>
-<div class="ant-row-flex">
+<div class="ant-row">
   <div class="ant-col" style="flex: 2 2 auto;">2 / 5</div>
   <div class="ant-col" style="flex: 3 3 auto;">3 / 5</div>
 </div>
 <div class="ant-divider ant-divider-horizontal ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text"> Fill rest </span></div>
-<div class="ant-row-flex">
+<div class="ant-row">
   <div class="ant-col" style="flex: 0 0 100px;">100px</div>
   <div class="ant-col" style="flex-basis: auto;">auto</div>
 </div>
 <div class="ant-divider ant-divider-horizontal ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text"> Raw flex style </span></div>
-<div class="ant-row-flex">
+<div class="ant-row">
   <div class="ant-col" style="flex: 1 1 200px;">1 1 200px</div>
   <div class="ant-col" style="flex: 0 1 300px;">0 1 300px</div>
 </div>
 `;
 
 exports[`renders ./antdv-demo/docs/grid/demo/flex-order.md correctly 1`] = `
-<div class="ant-row-flex">
+<div class="ant-row">
   <div class="ant-col ant-col-6 ant-col-order-4"> 1 col-order-4 </div>
   <div class="ant-col ant-col-6 ant-col-order-3"> 2 col-order-3 </div>
   <div class="ant-col ant-col-6 ant-col-order-2"> 3 col-order-2 </div>
diff --git a/components/grid/style/index.less b/components/grid/style/index.less
index 32010e185..490d959b5 100644
--- a/components/grid/style/index.less
+++ b/components/grid/style/index.less
@@ -4,17 +4,6 @@
 
 // Grid system
 .@{ant-prefix}-row {
-  .make-row();
-
-  display: block;
-  box-sizing: border-box;
-}
-
-.@{ant-prefix}-row + .@{ant-prefix}-row::before {
-  clear: both;
-}
-
-.@{ant-prefix}-row-flex {
   display: flex;
   flex-flow: row wrap;
 
@@ -25,52 +14,52 @@
 }
 
 // x轴原点
-.@{ant-prefix}-row-flex-start {
+.@{ant-prefix}-row-start {
   justify-content: flex-start;
 }
 
 // x轴居中
-.@{ant-prefix}-row-flex-center {
+.@{ant-prefix}-row-center {
   justify-content: center;
 }
 
 // x轴反方向
-.@{ant-prefix}-row-flex-end {
+.@{ant-prefix}-row-end {
   justify-content: flex-end;
 }
 
 // x轴平分
-.@{ant-prefix}-row-flex-space-between {
+.@{ant-prefix}-row-space-between {
   justify-content: space-between;
 }
 
 // x轴有间隔地平分
-.@{ant-prefix}-row-flex-space-around {
+.@{ant-prefix}-row-space-around {
   justify-content: space-around;
 }
 
 // 顶部对齐
-.@{ant-prefix}-row-flex-top {
+.@{ant-prefix}-row-top {
   align-items: flex-start;
 }
 
 // 居中对齐
-.@{ant-prefix}-row-flex-middle {
+.@{ant-prefix}-row-middle {
   align-items: center;
 }
 
 // 底部对齐
-.@{ant-prefix}-row-flex-bottom {
+.@{ant-prefix}-row-bottom {
   align-items: flex-end;
 }
 
 .@{ant-prefix}-col {
   position: relative;
+  max-width: 100%;
   // Prevent columns from collapsing when empty
   min-height: 1px;
 }
 
-.make-grid-columns();
 .make-grid();
 
 // Extra small grid
@@ -120,3 +109,5 @@
 @media (min-width: @screen-xxl-min) {
   .make-grid(-xxl);
 }
+
+@import './rtl';
diff --git a/components/grid/style/mixin.less b/components/grid/style/mixin.less
index cf3f68169..4d9de4706 100644
--- a/components/grid/style/mixin.less
+++ b/components/grid/style/mixin.less
@@ -2,59 +2,12 @@
 
 // mixins for grid system
 // ------------------------
-.make-row(@gutter: @grid-gutter-width) {
-  position: relative;
-  height: auto;
-  margin-right: (@gutter / -2);
-  margin-left: (@gutter / -2);
-  .clearfix;
-}
-
-.make-grid-columns() {
-  .col(@index) {
-    @item: ~'.@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}';
-    .col((@index + 1), @item);
-  }
-  .col(@index, @list) when (@index =< @grid-columns) {
-    @item: ~'.@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}';
-    .col((@index + 1), ~'@{list}, @{item}');
-  }
-  .col(@index, @list) when (@index > @grid-columns) {
-    @{list} {
-      position: relative;
-      padding-right: (@grid-gutter-width / 2);
-      padding-left: (@grid-gutter-width / 2);
-    }
-  }
-  .col(1);
-}
-
-.float-grid-columns(@class) {
-  .col(@index) {
-    // initial
-    @item: ~'.@{ant-prefix}-col@{class}-@{index}';
-    .col((@index + 1), @item);
-  }
-  .col(@index, @list) when (@index =< @grid-columns) {
-    // general
-    @item: ~'.@{ant-prefix}-col@{class}-@{index}';
-    .col((@index + 1), ~'@{list}, @{item}');
-  }
-  .col(@index, @list) when (@index > @grid-columns) {
-    // terminal
-    @{list} {
-      flex: 0 0 auto;
-      float: left;
-    }
-  }
-  .col(1); // kickstart it
-}
 
 .loop-grid-columns(@index, @class) when (@index > 0) {
   .@{ant-prefix}-col@{class}-@{index} {
     display: block;
-    box-sizing: border-box;
-    width: percentage((@index / @grid-columns));
+    flex: 0 0 percentage((@index / @grid-columns));
+    max-width: percentage((@index / @grid-columns));
   }
   .@{ant-prefix}-col@{class}-push-@{index} {
     left: percentage((@index / @grid-columns));
@@ -96,6 +49,5 @@
 }
 
 .make-grid(@class: ~'') {
-  .float-grid-columns(@class);
   .loop-grid-columns(@grid-columns, @class);
 }
diff --git a/components/grid/style/rtl.less b/components/grid/style/rtl.less
new file mode 100644
index 000000000..5a9e7256b
--- /dev/null
+++ b/components/grid/style/rtl.less
@@ -0,0 +1,68 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+.@{ant-prefix}-row {
+  &-rtl {
+    direction: rtl;
+  }
+}
+
+// mixin
+.loop-grid-columns(@index, @class) when (@index > 0) {
+  .@{ant-prefix}-col@{class}-push-@{index} {
+    // reset property in RTL direction
+    &.@{ant-prefix}-col-rtl {
+      right: percentage((@index / @grid-columns));
+      left: auto;
+    }
+  }
+
+  .@{ant-prefix}-col@{class}-pull-@{index} {
+    // reset property in RTL direction
+    &.@{ant-prefix}-col-rtl {
+      right: auto;
+      left: percentage((@index / @grid-columns));
+    }
+  }
+
+  .@{ant-prefix}-col@{class}-offset-@{index} {
+    // reset property in RTL direction
+    &.@{ant-prefix}-col-rtl {
+      margin-right: percentage((@index / @grid-columns));
+      margin-left: 0;
+    }
+  }
+}
+
+.loop-grid-columns(@index, @class) when (@index = 0) {
+  .@{ant-prefix}-col-push-@{index} {
+    // reset property in RTL direction
+    &.@{ant-prefix}-col-rtl {
+      right: auto;
+    }
+  }
+
+  .@{ant-prefix}-col-pull-@{index} {
+    &.@{ant-prefix}-col-rtl {
+      left: auto;
+    }
+  }
+
+  .@{ant-prefix}-col@{class}-push-@{index} {
+    &.@{ant-prefix}-col-rtl {
+      right: auto;
+    }
+  }
+
+  .@{ant-prefix}-col@{class}-pull-@{index} {
+    &.@{ant-prefix}-col-rtl {
+      left: auto;
+    }
+  }
+
+  .@{ant-prefix}-col@{class}-offset-@{index} {
+    &.@{ant-prefix}-col-rtl {
+      margin-right: 0;
+    }
+  }
+}
diff --git a/components/vc-tree-select/src/SearchInput.jsx b/components/vc-tree-select/src/SearchInput.jsx
index 03b29715c..dcb36f355 100644
--- a/components/vc-tree-select/src/SearchInput.jsx
+++ b/components/vc-tree-select/src/SearchInput.jsx
@@ -22,6 +22,7 @@ const SearchInput = {
     ariaId: PropTypes.string,
     isMultiple: PropTypes.looseBool.def(true),
   },
+  emits: ['mirrorSearchValueChange'],
   setup(props, { emit }) {
     const measureRef = ref();
     const inputWidth = ref(0);