From 24be945ea8851ba3aab6f827472dcc4f4d488079 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 27 Jul 2022 23:44:45 +0800
Subject: [PATCH] fix: Not work in old browser (#36748)

* fix: Drawer contentWrapperStyle logic

* fix: Update style

* test: Update snapshot

* test: More test case
---
 .../drawer/__tests__/DrawerEvent.test.js      |   14 +-
 .../__snapshots__/Drawer.test.js.snap         |   18 +-
 .../__snapshots__/DrawerEvent.test.js.snap    |    4 +-
 .../__snapshots__/demo-extend.test.tsx.snap   | 3784 +++++++++++++++--
 .../__tests__/__snapshots__/demo.test.js.snap |    4 -
 .../drawer/__tests__/demo-extend.test.tsx     |    1 +
 components/drawer/demo/no-mask.md             |    7 +
 components/drawer/style/drawer.less           |  312 +-
 components/drawer/style/motion.less           |    4 +
 package.json                                  |    2 +-
 10 files changed, 3433 insertions(+), 717 deletions(-)

diff --git a/components/drawer/__tests__/DrawerEvent.test.js b/components/drawer/__tests__/DrawerEvent.test.js
index d5e9f18c5a..1d3219ac6b 100644
--- a/components/drawer/__tests__/DrawerEvent.test.js
+++ b/components/drawer/__tests__/DrawerEvent.test.js
@@ -88,21 +88,21 @@ describe('Drawer', () => {
     act(() => {
       jest.runAllTimers();
     });
-    fireEvent.animationEnd(container.querySelector('.ant-drawer-content'));
-    expect(container.querySelector('.ant-drawer-content-hidden')).toBeTruthy();
+    fireEvent.animationEnd(container.querySelector('.ant-drawer-content-wrapper'));
+    expect(container.querySelector('.ant-drawer-content-wrapper-hidden')).toBeTruthy();
 
     // Show
     rerender(getDrawer({ visible: true, getContainer: false }));
-    expect(container.querySelector('.ant-drawer-content')).toBeTruthy();
-    expect(container.querySelector('.ant-drawer-content-hidden')).toBeFalsy();
+    expect(container.querySelector('.ant-drawer-content-wrapper')).toBeTruthy();
+    expect(container.querySelector('.ant-drawer-content-wrapper-hidden')).toBeFalsy();
 
     // Hide
     rerender(getDrawer({ visible: false, getContainer: false }));
     act(() => {
       jest.runAllTimers();
     });
-    fireEvent.animationEnd(container.querySelector('.ant-drawer-content'));
-    expect(container.querySelector('.ant-drawer-content-hidden')).toBeTruthy();
+    fireEvent.animationEnd(container.querySelector('.ant-drawer-content-wrapper'));
+    expect(container.querySelector('.ant-drawer-content-wrapper-hidden')).toBeTruthy();
   });
 
   it('test afterVisibleChange', async () => {
@@ -113,7 +113,7 @@ describe('Drawer', () => {
     act(() => {
       jest.runAllTimers();
     });
-    fireEvent.animationEnd(container.querySelector('.ant-drawer-content'));
+    fireEvent.animationEnd(container.querySelector('.ant-drawer-content-wrapper'));
 
     expect(afterVisibleChange).toBeCalledTimes(1);
   });
diff --git a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
index 8b734f11ad..a67cf551a7 100644
--- a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
@@ -15,7 +15,7 @@ exports[`Drawer className is test_drawer 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
     style="width: 378px;"
   >
     <div
@@ -91,7 +91,7 @@ exports[`Drawer closable is false 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
     style="width: 378px;"
   >
     <div
@@ -139,7 +139,7 @@ exports[`Drawer getContainer return undefined 2`] = `
       tabindex="0"
     />
     <div
-      class="ant-drawer-content-wrapper"
+      class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
       style="width: 400px;"
     >
       <div
@@ -216,7 +216,7 @@ exports[`Drawer have a footer 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
     style="width: 378px;"
   >
     <div
@@ -297,7 +297,7 @@ exports[`Drawer have a title 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
     style="width: 378px;"
   >
     <div
@@ -378,7 +378,7 @@ exports[`Drawer render correctly 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
     style="width: 400px;"
   >
     <div
@@ -454,7 +454,7 @@ exports[`Drawer render top drawer 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-top-appear ant-drawer-panel-motion-top-appear-active ant-drawer-panel-motion-top"
     style="height: 400px;"
   >
     <div
@@ -533,7 +533,7 @@ exports[`Drawer style/drawerStyle/headerStyle/bodyStyle should work 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
     style="width: 378px;"
   >
     <div
@@ -612,7 +612,7 @@ exports[`Drawer support closeIcon 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
     style="width: 400px;"
   >
     <div
diff --git a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
index 8db72b622a..269070541f 100644
--- a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
@@ -15,12 +15,12 @@ exports[`Drawer render correctly 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-leave ant-drawer-panel-motion-right-leave-start ant-drawer-panel-motion-right"
     style="width: 378px;"
   >
     <div
       aria-modal="true"
-      class="ant-drawer-content ant-drawer-panel-motion-right-leave ant-drawer-panel-motion-right-leave-start ant-drawer-panel-motion-right"
+      class="ant-drawer-content"
       role="dialog"
     >
       <div
diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
index 26e6b58499..6e0aaf7521 100644
--- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
+++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
@@ -1,14 +1,102 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/drawer/demo/basic-right.md extend context correctly 1`] = `
-<button
-  class="ant-btn ant-btn-primary"
-  type="button"
->
-  <span>
-    Open
-  </span>
-</button>
+HTMLCollection [
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Open
+    </span>
+  </button>,
+  <div
+    class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+    tabindex="-1"
+  >
+    <div
+      class="ant-drawer-mask ant-drawer-mask-motion-appear ant-drawer-mask-motion-appear-active ant-drawer-mask-motion"
+    />
+    <div
+      aria-hidden="true"
+      data-sentinel="start"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+    <div
+      class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+      style="width: 378px;"
+    >
+      <div
+        aria-modal="true"
+        class="ant-drawer-content"
+        role="dialog"
+      >
+        <div
+          class="ant-drawer-wrapper-body"
+        >
+          <div
+            class="ant-drawer-header"
+          >
+            <div
+              class="ant-drawer-header-title"
+            >
+              <button
+                aria-label="Close"
+                class="ant-drawer-close"
+                type="button"
+              >
+                <span
+                  aria-label="close"
+                  class="anticon anticon-close"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                    />
+                  </svg>
+                </span>
+              </button>
+              <div
+                class="ant-drawer-title"
+              >
+                Basic Drawer
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-drawer-body"
+          >
+            <p>
+              Some contents...
+            </p>
+            <p>
+              Some contents...
+            </p>
+            <p>
+              Some contents...
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      data-sentinel="end"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+  </div>,
+]
 `;
 
 exports[`renders ./components/drawer/demo/config-provider.md extend context correctly 1`] = `
@@ -23,364 +111,2780 @@ exports[`renders ./components/drawer/demo/config-provider.md extend context corr
       Open
     </span>
   </button>
-  <div>
+  <div
+    class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+    style="position: absolute;"
+    tabindex="-1"
+  >
     <div
-      class="ant-drawer ant-drawer-right ant-drawer-open"
-      style="position: absolute;"
-      tabindex="-1"
+      class="ant-drawer-mask ant-drawer-mask-motion-appear ant-drawer-mask-motion-appear-active ant-drawer-mask-motion"
+    />
+    <div
+      aria-hidden="true"
+      data-sentinel="start"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+    <div
+      class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+      style="width: 378px;"
     >
       <div
-        class="ant-drawer-mask ant-drawer-mask-motion-appear ant-drawer-mask-motion-appear-active ant-drawer-mask-motion"
-      />
-      <div
-        aria-hidden="true"
-        data-sentinel="start"
-        style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
-        tabindex="0"
-      />
-      <div
-        class="ant-drawer-content-wrapper"
-        style="width: 378px;"
+        aria-modal="true"
+        class="ant-drawer-content"
+        role="dialog"
       >
         <div
-          aria-modal="true"
-          class="ant-drawer-content ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
-          role="dialog"
+          class="ant-drawer-wrapper-body"
         >
           <div
-            class="ant-drawer-wrapper-body"
+            class="ant-drawer-header"
           >
             <div
-              class="ant-drawer-header"
+              class="ant-drawer-header-title"
             >
-              <div
-                class="ant-drawer-header-title"
+              <button
+                aria-label="Close"
+                class="ant-drawer-close"
+                type="button"
               >
-                <button
-                  aria-label="Close"
-                  class="ant-drawer-close"
-                  type="button"
+                <span
+                  aria-label="close"
+                  class="anticon anticon-close"
+                  role="img"
                 >
-                  <span
-                    aria-label="close"
-                    class="anticon anticon-close"
-                    role="img"
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="close"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                      />
-                    </svg>
-                  </span>
-                </button>
-                <div
-                  class="ant-drawer-title"
-                >
-                  ConfigProvider
-                </div>
+                    <path
+                      d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                    />
+                  </svg>
+                </span>
+              </button>
+              <div
+                class="ant-drawer-title"
+              >
+                ConfigProvider
               </div>
             </div>
-            <div
-              class="ant-drawer-body"
-            >
-              <p>
-                Some contents...
-              </p>
-              <p>
-                Some contents...
-              </p>
-              <p>
-                Some contents...
-              </p>
-            </div>
+          </div>
+          <div
+            class="ant-drawer-body"
+          >
+            <p>
+              Some contents...
+            </p>
+            <p>
+              Some contents...
+            </p>
+            <p>
+              Some contents...
+            </p>
           </div>
         </div>
       </div>
-      <div
-        aria-hidden="true"
-        data-sentinel="end"
-        style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
-        tabindex="0"
-      />
     </div>
+    <div
+      aria-hidden="true"
+      data-sentinel="end"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
   </div>
 </div>
 `;
 
 exports[`renders ./components/drawer/demo/extra.md extend context correctly 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center"
->
+HTMLCollection [
   <div
-    class="ant-space-item"
-    style="margin-right: 8px;"
+    class="ant-space ant-space-horizontal ant-space-align-center"
   >
     <div
-      class="ant-radio-group ant-radio-group-outline"
+      class="ant-space-item"
+      style="margin-right: 8px;"
     >
-      <label
-        class="ant-radio-wrapper"
+      <div
+        class="ant-radio-group ant-radio-group-outline"
       >
-        <span
-          class="ant-radio"
+        <label
+          class="ant-radio-wrapper"
         >
-          <input
-            class="ant-radio-input"
-            type="radio"
-            value="top"
-          />
           <span
-            class="ant-radio-inner"
-          />
-        </span>
-        <span>
-          top
-        </span>
-      </label>
-      <label
-        class="ant-radio-wrapper ant-radio-wrapper-checked"
-      >
-        <span
-          class="ant-radio ant-radio-checked"
+            class="ant-radio"
+          >
+            <input
+              class="ant-radio-input"
+              type="radio"
+              value="top"
+            />
+            <span
+              class="ant-radio-inner"
+            />
+          </span>
+          <span>
+            top
+          </span>
+        </label>
+        <label
+          class="ant-radio-wrapper ant-radio-wrapper-checked"
         >
-          <input
-            checked=""
-            class="ant-radio-input"
-            type="radio"
-            value="right"
-          />
           <span
-            class="ant-radio-inner"
-          />
-        </span>
-        <span>
-          right
-        </span>
-      </label>
-      <label
-        class="ant-radio-wrapper"
-      >
-        <span
-          class="ant-radio"
+            class="ant-radio ant-radio-checked"
+          >
+            <input
+              checked=""
+              class="ant-radio-input"
+              type="radio"
+              value="right"
+            />
+            <span
+              class="ant-radio-inner"
+            />
+          </span>
+          <span>
+            right
+          </span>
+        </label>
+        <label
+          class="ant-radio-wrapper"
         >
-          <input
-            class="ant-radio-input"
-            type="radio"
-            value="bottom"
-          />
           <span
-            class="ant-radio-inner"
-          />
-        </span>
-        <span>
-          bottom
-        </span>
-      </label>
-      <label
-        class="ant-radio-wrapper"
-      >
-        <span
-          class="ant-radio"
+            class="ant-radio"
+          >
+            <input
+              class="ant-radio-input"
+              type="radio"
+              value="bottom"
+            />
+            <span
+              class="ant-radio-inner"
+            />
+          </span>
+          <span>
+            bottom
+          </span>
+        </label>
+        <label
+          class="ant-radio-wrapper"
         >
-          <input
-            class="ant-radio-input"
-            type="radio"
-            value="left"
-          />
           <span
-            class="ant-radio-inner"
-          />
-        </span>
-        <span>
-          left
-        </span>
-      </label>
+            class="ant-radio"
+          >
+            <input
+              class="ant-radio-input"
+              type="radio"
+              value="left"
+            />
+            <span
+              class="ant-radio-inner"
+            />
+          </span>
+          <span>
+            left
+          </span>
+        </label>
+      </div>
     </div>
-  </div>
-  <div
-    class="ant-space-item"
-  >
-    <button
-      class="ant-btn ant-btn-primary"
-      type="button"
+    <div
+      class="ant-space-item"
     >
-      <span>
-        Open
-      </span>
-    </button>
-  </div>
-</div>
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          Open
+        </span>
+      </button>
+    </div>
+  </div>,
+  <div
+    class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+    tabindex="-1"
+  >
+    <div
+      class="ant-drawer-mask ant-drawer-mask-motion-appear ant-drawer-mask-motion-appear-active ant-drawer-mask-motion"
+    />
+    <div
+      aria-hidden="true"
+      data-sentinel="start"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+    <div
+      class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+      style="width: 500px;"
+    >
+      <div
+        aria-modal="true"
+        class="ant-drawer-content"
+        role="dialog"
+      >
+        <div
+          class="ant-drawer-wrapper-body"
+        >
+          <div
+            class="ant-drawer-header"
+          >
+            <div
+              class="ant-drawer-header-title"
+            >
+              <button
+                aria-label="Close"
+                class="ant-drawer-close"
+                type="button"
+              >
+                <span
+                  aria-label="close"
+                  class="anticon anticon-close"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                    />
+                  </svg>
+                </span>
+              </button>
+              <div
+                class="ant-drawer-title"
+              >
+                Drawer with extra actions
+              </div>
+            </div>
+            <div
+              class="ant-drawer-extra"
+            >
+              <div
+                class="ant-space ant-space-horizontal ant-space-align-center"
+              >
+                <div
+                  class="ant-space-item"
+                  style="margin-right: 8px;"
+                >
+                  <button
+                    class="ant-btn ant-btn-default"
+                    type="button"
+                  >
+                    <span>
+                      Cancel
+                    </span>
+                  </button>
+                </div>
+                <div
+                  class="ant-space-item"
+                >
+                  <button
+                    class="ant-btn ant-btn-primary"
+                    type="button"
+                  >
+                    <span>
+                      OK
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-drawer-body"
+          >
+            <p>
+              Some contents...
+            </p>
+            <p>
+              Some contents...
+            </p>
+            <p>
+              Some contents...
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      data-sentinel="end"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+  </div>,
+]
 `;
 
 exports[`renders ./components/drawer/demo/form-in-drawer.md extend context correctly 1`] = `
-<button
-  class="ant-btn ant-btn-primary"
-  type="button"
->
-  <span
-    aria-label="plus"
-    class="anticon anticon-plus"
-    role="img"
+HTMLCollection [
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
   >
-    <svg
-      aria-hidden="true"
-      data-icon="plus"
-      fill="currentColor"
-      focusable="false"
-      height="1em"
-      viewBox="64 64 896 896"
-      width="1em"
+    <span
+      aria-label="plus"
+      class="anticon anticon-plus"
+      role="img"
     >
-      <defs>
-        <style />
-      </defs>
-      <path
-        d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-      />
-      <path
-        d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-      />
-    </svg>
-  </span>
-  <span>
-    New account
-  </span>
-</button>
+      <svg
+        aria-hidden="true"
+        data-icon="plus"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <defs>
+          <style />
+        </defs>
+        <path
+          d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+        />
+        <path
+          d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+        />
+      </svg>
+    </span>
+    <span>
+      New account
+    </span>
+  </button>,
+  <div
+    class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+    tabindex="-1"
+  >
+    <div
+      class="ant-drawer-mask ant-drawer-mask-motion-appear ant-drawer-mask-motion-appear-active ant-drawer-mask-motion"
+    />
+    <div
+      aria-hidden="true"
+      data-sentinel="start"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+    <div
+      class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+      style="width: 720px;"
+    >
+      <div
+        aria-modal="true"
+        class="ant-drawer-content"
+        role="dialog"
+      >
+        <div
+          class="ant-drawer-wrapper-body"
+        >
+          <div
+            class="ant-drawer-header"
+          >
+            <div
+              class="ant-drawer-header-title"
+            >
+              <button
+                aria-label="Close"
+                class="ant-drawer-close"
+                type="button"
+              >
+                <span
+                  aria-label="close"
+                  class="anticon anticon-close"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                    />
+                  </svg>
+                </span>
+              </button>
+              <div
+                class="ant-drawer-title"
+              >
+                Create a new account
+              </div>
+            </div>
+            <div
+              class="ant-drawer-extra"
+            >
+              <div
+                class="ant-space ant-space-horizontal ant-space-align-center"
+              >
+                <div
+                  class="ant-space-item"
+                  style="margin-right: 8px;"
+                >
+                  <button
+                    class="ant-btn ant-btn-default"
+                    type="button"
+                  >
+                    <span>
+                      Cancel
+                    </span>
+                  </button>
+                </div>
+                <div
+                  class="ant-space-item"
+                >
+                  <button
+                    class="ant-btn ant-btn-primary"
+                    type="button"
+                  >
+                    <span>
+                      Submit
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-drawer-body"
+            style="padding-bottom: 80px;"
+          >
+            <form
+              class="ant-form ant-form-vertical ant-form-hide-required-mark"
+            >
+              <div
+                class="ant-row"
+                style="margin-left: -8px; margin-right: -8px;"
+              >
+                <div
+                  class="ant-col ant-col-12"
+                  style="padding-left: 8px; padding-right: 8px;"
+                >
+                  <div
+                    class="ant-form-item"
+                  >
+                    <div
+                      class="ant-row ant-form-item-row"
+                    >
+                      <div
+                        class="ant-col ant-form-item-label"
+                      >
+                        <label
+                          class="ant-form-item-required"
+                          for="name"
+                          title="Name"
+                        >
+                          Name
+                        </label>
+                      </div>
+                      <div
+                        class="ant-col ant-form-item-control"
+                      >
+                        <div
+                          class="ant-form-item-control-input"
+                        >
+                          <div
+                            class="ant-form-item-control-input-content"
+                          >
+                            <input
+                              class="ant-input"
+                              id="name"
+                              placeholder="Please enter user name"
+                              type="text"
+                              value=""
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="ant-col ant-col-12"
+                  style="padding-left: 8px; padding-right: 8px;"
+                >
+                  <div
+                    class="ant-form-item"
+                  >
+                    <div
+                      class="ant-row ant-form-item-row"
+                    >
+                      <div
+                        class="ant-col ant-form-item-label"
+                      >
+                        <label
+                          class="ant-form-item-required"
+                          for="url"
+                          title="Url"
+                        >
+                          Url
+                        </label>
+                      </div>
+                      <div
+                        class="ant-col ant-form-item-control"
+                      >
+                        <div
+                          class="ant-form-item-control-input"
+                        >
+                          <div
+                            class="ant-form-item-control-input-content"
+                          >
+                            <span
+                              class="ant-input-group-wrapper"
+                              style="width: 100%;"
+                            >
+                              <span
+                                class="ant-input-wrapper ant-input-group"
+                              >
+                                <span
+                                  class="ant-input-group-addon"
+                                >
+                                  http://
+                                </span>
+                                <input
+                                  class="ant-input"
+                                  id="url"
+                                  placeholder="Please enter url"
+                                  type="text"
+                                  value=""
+                                />
+                                <span
+                                  class="ant-input-group-addon"
+                                >
+                                  .com
+                                </span>
+                              </span>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="ant-row"
+                style="margin-left: -8px; margin-right: -8px;"
+              >
+                <div
+                  class="ant-col ant-col-12"
+                  style="padding-left: 8px; padding-right: 8px;"
+                >
+                  <div
+                    class="ant-form-item"
+                  >
+                    <div
+                      class="ant-row ant-form-item-row"
+                    >
+                      <div
+                        class="ant-col ant-form-item-label"
+                      >
+                        <label
+                          class="ant-form-item-required"
+                          for="owner"
+                          title="Owner"
+                        >
+                          Owner
+                        </label>
+                      </div>
+                      <div
+                        class="ant-col ant-form-item-control"
+                      >
+                        <div
+                          class="ant-form-item-control-input"
+                        >
+                          <div
+                            class="ant-form-item-control-input-content"
+                          >
+                            <div
+                              class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
+                            >
+                              <div
+                                class="ant-select-selector"
+                              >
+                                <span
+                                  class="ant-select-selection-search"
+                                >
+                                  <input
+                                    aria-activedescendant="owner_list_0"
+                                    aria-autocomplete="list"
+                                    aria-controls="owner_list"
+                                    aria-haspopup="listbox"
+                                    aria-owns="owner_list"
+                                    autocomplete="off"
+                                    class="ant-select-selection-search-input"
+                                    id="owner"
+                                    readonly=""
+                                    role="combobox"
+                                    style="opacity: 0;"
+                                    type="search"
+                                    unselectable="on"
+                                    value=""
+                                  />
+                                </span>
+                                <span
+                                  class="ant-select-selection-placeholder"
+                                >
+                                  Please select an owner
+                                </span>
+                              </div>
+                              <div>
+                                <div
+                                  class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+                                  style="opacity: 0;"
+                                >
+                                  <div>
+                                    <div
+                                      id="owner_list"
+                                      role="listbox"
+                                      style="height: 0px; width: 0px; overflow: hidden;"
+                                    >
+                                      <div
+                                        aria-label="Xiaoxiao Fu"
+                                        aria-selected="false"
+                                        id="owner_list_0"
+                                        role="option"
+                                      >
+                                        xiao
+                                      </div>
+                                      <div
+                                        aria-label="Maomao Zhou"
+                                        aria-selected="false"
+                                        id="owner_list_1"
+                                        role="option"
+                                      >
+                                        mao
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="rc-virtual-list"
+                                      style="position: relative;"
+                                    >
+                                      <div
+                                        class="rc-virtual-list-holder"
+                                        style="max-height: 256px; overflow-y: auto;"
+                                      >
+                                        <div>
+                                          <div
+                                            class="rc-virtual-list-holder-inner"
+                                            style="display: flex; flex-direction: column;"
+                                          >
+                                            <div
+                                              aria-selected="false"
+                                              class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                                              title="Xiaoxiao Fu"
+                                            >
+                                              <div
+                                                class="ant-select-item-option-content"
+                                              >
+                                                Xiaoxiao Fu
+                                              </div>
+                                              <span
+                                                aria-hidden="true"
+                                                class="ant-select-item-option-state"
+                                                style="user-select: none;"
+                                                unselectable="on"
+                                              />
+                                            </div>
+                                            <div
+                                              aria-selected="false"
+                                              class="ant-select-item ant-select-item-option"
+                                              title="Maomao Zhou"
+                                            >
+                                              <div
+                                                class="ant-select-item-option-content"
+                                              >
+                                                Maomao Zhou
+                                              </div>
+                                              <span
+                                                aria-hidden="true"
+                                                class="ant-select-item-option-state"
+                                                style="user-select: none;"
+                                                unselectable="on"
+                                              />
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-arrow"
+                                style="user-select: none;"
+                                unselectable="on"
+                              >
+                                <span
+                                  aria-label="down"
+                                  class="anticon anticon-down ant-select-suffix"
+                                  role="img"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    data-icon="down"
+                                    fill="currentColor"
+                                    focusable="false"
+                                    height="1em"
+                                    viewBox="64 64 896 896"
+                                    width="1em"
+                                  >
+                                    <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"
+                                    />
+                                  </svg>
+                                </span>
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="ant-col ant-col-12"
+                  style="padding-left: 8px; padding-right: 8px;"
+                >
+                  <div
+                    class="ant-form-item"
+                  >
+                    <div
+                      class="ant-row ant-form-item-row"
+                    >
+                      <div
+                        class="ant-col ant-form-item-label"
+                      >
+                        <label
+                          class="ant-form-item-required"
+                          for="type"
+                          title="Type"
+                        >
+                          Type
+                        </label>
+                      </div>
+                      <div
+                        class="ant-col ant-form-item-control"
+                      >
+                        <div
+                          class="ant-form-item-control-input"
+                        >
+                          <div
+                            class="ant-form-item-control-input-content"
+                          >
+                            <div
+                              class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
+                            >
+                              <div
+                                class="ant-select-selector"
+                              >
+                                <span
+                                  class="ant-select-selection-search"
+                                >
+                                  <input
+                                    aria-activedescendant="type_list_0"
+                                    aria-autocomplete="list"
+                                    aria-controls="type_list"
+                                    aria-haspopup="listbox"
+                                    aria-owns="type_list"
+                                    autocomplete="off"
+                                    class="ant-select-selection-search-input"
+                                    id="type"
+                                    readonly=""
+                                    role="combobox"
+                                    style="opacity: 0;"
+                                    type="search"
+                                    unselectable="on"
+                                    value=""
+                                  />
+                                </span>
+                                <span
+                                  class="ant-select-selection-placeholder"
+                                >
+                                  Please choose the type
+                                </span>
+                              </div>
+                              <div>
+                                <div
+                                  class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+                                  style="opacity: 0;"
+                                >
+                                  <div>
+                                    <div
+                                      id="type_list"
+                                      role="listbox"
+                                      style="height: 0px; width: 0px; overflow: hidden;"
+                                    >
+                                      <div
+                                        aria-label="Private"
+                                        aria-selected="false"
+                                        id="type_list_0"
+                                        role="option"
+                                      >
+                                        private
+                                      </div>
+                                      <div
+                                        aria-label="Public"
+                                        aria-selected="false"
+                                        id="type_list_1"
+                                        role="option"
+                                      >
+                                        public
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="rc-virtual-list"
+                                      style="position: relative;"
+                                    >
+                                      <div
+                                        class="rc-virtual-list-holder"
+                                        style="max-height: 256px; overflow-y: auto;"
+                                      >
+                                        <div>
+                                          <div
+                                            class="rc-virtual-list-holder-inner"
+                                            style="display: flex; flex-direction: column;"
+                                          >
+                                            <div
+                                              aria-selected="false"
+                                              class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                                              title="Private"
+                                            >
+                                              <div
+                                                class="ant-select-item-option-content"
+                                              >
+                                                Private
+                                              </div>
+                                              <span
+                                                aria-hidden="true"
+                                                class="ant-select-item-option-state"
+                                                style="user-select: none;"
+                                                unselectable="on"
+                                              />
+                                            </div>
+                                            <div
+                                              aria-selected="false"
+                                              class="ant-select-item ant-select-item-option"
+                                              title="Public"
+                                            >
+                                              <div
+                                                class="ant-select-item-option-content"
+                                              >
+                                                Public
+                                              </div>
+                                              <span
+                                                aria-hidden="true"
+                                                class="ant-select-item-option-state"
+                                                style="user-select: none;"
+                                                unselectable="on"
+                                              />
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-arrow"
+                                style="user-select: none;"
+                                unselectable="on"
+                              >
+                                <span
+                                  aria-label="down"
+                                  class="anticon anticon-down ant-select-suffix"
+                                  role="img"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    data-icon="down"
+                                    fill="currentColor"
+                                    focusable="false"
+                                    height="1em"
+                                    viewBox="64 64 896 896"
+                                    width="1em"
+                                  >
+                                    <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"
+                                    />
+                                  </svg>
+                                </span>
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="ant-row"
+                style="margin-left: -8px; margin-right: -8px;"
+              >
+                <div
+                  class="ant-col ant-col-12"
+                  style="padding-left: 8px; padding-right: 8px;"
+                >
+                  <div
+                    class="ant-form-item"
+                  >
+                    <div
+                      class="ant-row ant-form-item-row"
+                    >
+                      <div
+                        class="ant-col ant-form-item-label"
+                      >
+                        <label
+                          class="ant-form-item-required"
+                          for="approver"
+                          title="Approver"
+                        >
+                          Approver
+                        </label>
+                      </div>
+                      <div
+                        class="ant-col ant-form-item-control"
+                      >
+                        <div
+                          class="ant-form-item-control-input"
+                        >
+                          <div
+                            class="ant-form-item-control-input-content"
+                          >
+                            <div
+                              class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
+                            >
+                              <div
+                                class="ant-select-selector"
+                              >
+                                <span
+                                  class="ant-select-selection-search"
+                                >
+                                  <input
+                                    aria-activedescendant="approver_list_0"
+                                    aria-autocomplete="list"
+                                    aria-controls="approver_list"
+                                    aria-haspopup="listbox"
+                                    aria-owns="approver_list"
+                                    autocomplete="off"
+                                    class="ant-select-selection-search-input"
+                                    id="approver"
+                                    readonly=""
+                                    role="combobox"
+                                    style="opacity: 0;"
+                                    type="search"
+                                    unselectable="on"
+                                    value=""
+                                  />
+                                </span>
+                                <span
+                                  class="ant-select-selection-placeholder"
+                                >
+                                  Please choose the approver
+                                </span>
+                              </div>
+                              <div>
+                                <div
+                                  class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+                                  style="opacity: 0;"
+                                >
+                                  <div>
+                                    <div
+                                      id="approver_list"
+                                      role="listbox"
+                                      style="height: 0px; width: 0px; overflow: hidden;"
+                                    >
+                                      <div
+                                        aria-label="Jack Ma"
+                                        aria-selected="false"
+                                        id="approver_list_0"
+                                        role="option"
+                                      >
+                                        jack
+                                      </div>
+                                      <div
+                                        aria-label="Tom Liu"
+                                        aria-selected="false"
+                                        id="approver_list_1"
+                                        role="option"
+                                      >
+                                        tom
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="rc-virtual-list"
+                                      style="position: relative;"
+                                    >
+                                      <div
+                                        class="rc-virtual-list-holder"
+                                        style="max-height: 256px; overflow-y: auto;"
+                                      >
+                                        <div>
+                                          <div
+                                            class="rc-virtual-list-holder-inner"
+                                            style="display: flex; flex-direction: column;"
+                                          >
+                                            <div
+                                              aria-selected="false"
+                                              class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                                              title="Jack Ma"
+                                            >
+                                              <div
+                                                class="ant-select-item-option-content"
+                                              >
+                                                Jack Ma
+                                              </div>
+                                              <span
+                                                aria-hidden="true"
+                                                class="ant-select-item-option-state"
+                                                style="user-select: none;"
+                                                unselectable="on"
+                                              />
+                                            </div>
+                                            <div
+                                              aria-selected="false"
+                                              class="ant-select-item ant-select-item-option"
+                                              title="Tom Liu"
+                                            >
+                                              <div
+                                                class="ant-select-item-option-content"
+                                              >
+                                                Tom Liu
+                                              </div>
+                                              <span
+                                                aria-hidden="true"
+                                                class="ant-select-item-option-state"
+                                                style="user-select: none;"
+                                                unselectable="on"
+                                              />
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-arrow"
+                                style="user-select: none;"
+                                unselectable="on"
+                              >
+                                <span
+                                  aria-label="down"
+                                  class="anticon anticon-down ant-select-suffix"
+                                  role="img"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    data-icon="down"
+                                    fill="currentColor"
+                                    focusable="false"
+                                    height="1em"
+                                    viewBox="64 64 896 896"
+                                    width="1em"
+                                  >
+                                    <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"
+                                    />
+                                  </svg>
+                                </span>
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="ant-col ant-col-12"
+                  style="padding-left: 8px; padding-right: 8px;"
+                >
+                  <div
+                    class="ant-form-item"
+                  >
+                    <div
+                      class="ant-row ant-form-item-row"
+                    >
+                      <div
+                        class="ant-col ant-form-item-label"
+                      >
+                        <label
+                          class="ant-form-item-required"
+                          for="dateTime"
+                          title="DateTime"
+                        >
+                          DateTime
+                        </label>
+                      </div>
+                      <div
+                        class="ant-col ant-form-item-control"
+                      >
+                        <div
+                          class="ant-form-item-control-input"
+                        >
+                          <div
+                            class="ant-form-item-control-input-content"
+                          >
+                            <div
+                              class="ant-picker ant-picker-range"
+                              style="width: 100%;"
+                            >
+                              <div
+                                class="ant-picker-input ant-picker-input-active"
+                              >
+                                <input
+                                  autocomplete="off"
+                                  id="dateTime"
+                                  placeholder="Start date"
+                                  readonly=""
+                                  size="12"
+                                  value=""
+                                />
+                              </div>
+                              <div
+                                class="ant-picker-range-separator"
+                              >
+                                <span
+                                  aria-label="to"
+                                  class="ant-picker-separator"
+                                >
+                                  <span
+                                    aria-label="swap-right"
+                                    class="anticon anticon-swap-right"
+                                    role="img"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="swap-right"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="0 0 1024 1024"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                              </div>
+                              <div
+                                class="ant-picker-input"
+                              >
+                                <input
+                                  autocomplete="off"
+                                  placeholder="End date"
+                                  readonly=""
+                                  size="12"
+                                  value=""
+                                />
+                              </div>
+                              <div
+                                class="ant-picker-active-bar"
+                                style="left: 0px; width: 0px; position: absolute;"
+                              />
+                              <span
+                                class="ant-picker-suffix"
+                              >
+                                <span
+                                  aria-label="calendar"
+                                  class="anticon anticon-calendar"
+                                  role="img"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    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>
+                              <div
+                                class="ant-picker-dropdown ant-picker-dropdown-range ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+                                style="opacity: 0;"
+                              >
+                                <div
+                                  class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
+                                  style="min-width: 0;"
+                                >
+                                  <div
+                                    class="ant-picker-range-arrow"
+                                    style="left: 0px;"
+                                  />
+                                  <div
+                                    class="ant-picker-panel-container"
+                                    style="margin-left: 0px;"
+                                  >
+                                    <div
+                                      class="ant-picker-panels"
+                                    >
+                                      <div
+                                        class="ant-picker-panel ant-picker-panel-focused"
+                                        tabindex="-1"
+                                      >
+                                        <div
+                                          class="ant-picker-date-panel"
+                                        >
+                                          <div
+                                            class="ant-picker-header"
+                                          >
+                                            <button
+                                              class="ant-picker-header-super-prev-btn"
+                                              tabindex="-1"
+                                              type="button"
+                                            >
+                                              <span
+                                                class="ant-picker-super-prev-icon"
+                                              />
+                                            </button>
+                                            <button
+                                              class="ant-picker-header-prev-btn"
+                                              tabindex="-1"
+                                              type="button"
+                                            >
+                                              <span
+                                                class="ant-picker-prev-icon"
+                                              />
+                                            </button>
+                                            <div
+                                              class="ant-picker-header-view"
+                                            >
+                                              <button
+                                                class="ant-picker-month-btn"
+                                                tabindex="-1"
+                                                type="button"
+                                              >
+                                                Jul
+                                              </button>
+                                              <button
+                                                class="ant-picker-year-btn"
+                                                tabindex="-1"
+                                                type="button"
+                                              >
+                                                2022
+                                              </button>
+                                            </div>
+                                            <button
+                                              class="ant-picker-header-next-btn"
+                                              style="visibility: hidden;"
+                                              tabindex="-1"
+                                              type="button"
+                                            >
+                                              <span
+                                                class="ant-picker-next-icon"
+                                              />
+                                            </button>
+                                            <button
+                                              class="ant-picker-header-super-next-btn"
+                                              style="visibility: hidden;"
+                                              tabindex="-1"
+                                              type="button"
+                                            >
+                                              <span
+                                                class="ant-picker-super-next-icon"
+                                              />
+                                            </button>
+                                          </div>
+                                          <div
+                                            class="ant-picker-body"
+                                          >
+                                            <table
+                                              class="ant-picker-content"
+                                            >
+                                              <thead>
+                                                <tr>
+                                                  <th>
+                                                    Su
+                                                  </th>
+                                                  <th>
+                                                    Mo
+                                                  </th>
+                                                  <th>
+                                                    Tu
+                                                  </th>
+                                                  <th>
+                                                    We
+                                                  </th>
+                                                  <th>
+                                                    Th
+                                                  </th>
+                                                  <th>
+                                                    Fr
+                                                  </th>
+                                                  <th>
+                                                    Sa
+                                                  </th>
+                                                </tr>
+                                              </thead>
+                                              <tbody>
+                                                <tr>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-06-26"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      26
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-06-27"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      27
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-06-28"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      28
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-06-29"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      29
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-end"
+                                                    title="2022-06-30"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      30
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                                                    title="2022-07-01"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      1
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-02"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      2
+                                                    </div>
+                                                  </td>
+                                                </tr>
+                                                <tr>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-03"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      3
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-04"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      4
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-05"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      5
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-06"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      6
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-07"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      7
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-08"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      8
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-09"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      9
+                                                    </div>
+                                                  </td>
+                                                </tr>
+                                                <tr>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-10"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      10
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-11"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      11
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-12"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      12
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-13"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      13
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-14"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      14
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-15"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      15
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-16"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      16
+                                                    </div>
+                                                  </td>
+                                                </tr>
+                                                <tr>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-17"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      17
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-18"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      18
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-19"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      19
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-20"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      20
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-21"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      21
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-22"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      22
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-23"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      23
+                                                    </div>
+                                                  </td>
+                                                </tr>
+                                                <tr>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-24"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      24
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-25"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      25
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-26"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      26
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
+                                                    title="2022-07-27"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      27
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-28"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      28
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-29"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      29
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-07-30"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      30
+                                                    </div>
+                                                  </td>
+                                                </tr>
+                                                <tr>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                                                    title="2022-07-31"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      31
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-start"
+                                                    title="2022-08-01"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      1
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-08-02"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      2
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-08-03"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      3
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-08-04"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      4
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-08-05"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      5
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-08-06"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      6
+                                                    </div>
+                                                  </td>
+                                                </tr>
+                                              </tbody>
+                                            </table>
+                                          </div>
+                                        </div>
+                                      </div>
+                                      <div
+                                        class="ant-picker-panel ant-picker-panel-focused"
+                                        tabindex="-1"
+                                      >
+                                        <div
+                                          class="ant-picker-date-panel"
+                                        >
+                                          <div
+                                            class="ant-picker-header"
+                                          >
+                                            <button
+                                              class="ant-picker-header-super-prev-btn"
+                                              style="visibility: hidden;"
+                                              tabindex="-1"
+                                              type="button"
+                                            >
+                                              <span
+                                                class="ant-picker-super-prev-icon"
+                                              />
+                                            </button>
+                                            <button
+                                              class="ant-picker-header-prev-btn"
+                                              style="visibility: hidden;"
+                                              tabindex="-1"
+                                              type="button"
+                                            >
+                                              <span
+                                                class="ant-picker-prev-icon"
+                                              />
+                                            </button>
+                                            <div
+                                              class="ant-picker-header-view"
+                                            >
+                                              <button
+                                                class="ant-picker-month-btn"
+                                                tabindex="-1"
+                                                type="button"
+                                              >
+                                                Aug
+                                              </button>
+                                              <button
+                                                class="ant-picker-year-btn"
+                                                tabindex="-1"
+                                                type="button"
+                                              >
+                                                2022
+                                              </button>
+                                            </div>
+                                            <button
+                                              class="ant-picker-header-next-btn"
+                                              tabindex="-1"
+                                              type="button"
+                                            >
+                                              <span
+                                                class="ant-picker-next-icon"
+                                              />
+                                            </button>
+                                            <button
+                                              class="ant-picker-header-super-next-btn"
+                                              tabindex="-1"
+                                              type="button"
+                                            >
+                                              <span
+                                                class="ant-picker-super-next-icon"
+                                              />
+                                            </button>
+                                          </div>
+                                          <div
+                                            class="ant-picker-body"
+                                          >
+                                            <table
+                                              class="ant-picker-content"
+                                            >
+                                              <thead>
+                                                <tr>
+                                                  <th>
+                                                    Su
+                                                  </th>
+                                                  <th>
+                                                    Mo
+                                                  </th>
+                                                  <th>
+                                                    Tu
+                                                  </th>
+                                                  <th>
+                                                    We
+                                                  </th>
+                                                  <th>
+                                                    Th
+                                                  </th>
+                                                  <th>
+                                                    Fr
+                                                  </th>
+                                                  <th>
+                                                    Sa
+                                                  </th>
+                                                </tr>
+                                              </thead>
+                                              <tbody>
+                                                <tr>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-end"
+                                                    title="2022-07-31"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      31
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                                                    title="2022-08-01"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      1
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-02"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      2
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-03"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      3
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-04"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      4
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-05"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      5
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-06"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      6
+                                                    </div>
+                                                  </td>
+                                                </tr>
+                                                <tr>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-07"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      7
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-08"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      8
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-09"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      9
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-10"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      10
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-11"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      11
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-12"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      12
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-13"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      13
+                                                    </div>
+                                                  </td>
+                                                </tr>
+                                                <tr>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-14"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      14
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-15"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      15
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-16"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      16
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-17"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      17
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-18"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      18
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-19"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      19
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-20"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      20
+                                                    </div>
+                                                  </td>
+                                                </tr>
+                                                <tr>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-21"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      21
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-22"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      22
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-23"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      23
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-24"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      24
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-25"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      25
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-26"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      26
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-27"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      27
+                                                    </div>
+                                                  </td>
+                                                </tr>
+                                                <tr>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-28"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      28
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-29"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      29
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                                    title="2022-08-30"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      30
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                                                    title="2022-08-31"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      31
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell ant-picker-cell-start"
+                                                    title="2022-09-01"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      1
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-09-02"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      2
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-09-03"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      3
+                                                    </div>
+                                                  </td>
+                                                </tr>
+                                                <tr>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-09-04"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      4
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-09-05"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      5
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-09-06"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      6
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-09-07"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      7
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-09-08"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      8
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-09-09"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      9
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="ant-picker-cell"
+                                                    title="2022-09-10"
+                                                  >
+                                                    <div
+                                                      class="ant-picker-cell-inner"
+                                                    >
+                                                      10
+                                                    </div>
+                                                  </td>
+                                                </tr>
+                                              </tbody>
+                                            </table>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              style="position: absolute; top: 0px; left: 0px; width: 100%;"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="ant-row"
+                style="margin-left: -8px; margin-right: -8px;"
+              >
+                <div
+                  class="ant-col ant-col-24"
+                  style="padding-left: 8px; padding-right: 8px;"
+                >
+                  <div
+                    class="ant-form-item"
+                  >
+                    <div
+                      class="ant-row ant-form-item-row"
+                    >
+                      <div
+                        class="ant-col ant-form-item-label"
+                      >
+                        <label
+                          class="ant-form-item-required"
+                          for="description"
+                          title="Description"
+                        >
+                          Description
+                        </label>
+                      </div>
+                      <div
+                        class="ant-col ant-form-item-control"
+                      >
+                        <div
+                          class="ant-form-item-control-input"
+                        >
+                          <div
+                            class="ant-form-item-control-input-content"
+                          >
+                            <textarea
+                              class="ant-input"
+                              id="description"
+                              placeholder="please enter url description"
+                              rows="4"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      data-sentinel="end"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+  </div>,
+]
 `;
 
 exports[`renders ./components/drawer/demo/multi-level-drawer.md extend context correctly 1`] = `
-<button
-  class="ant-btn ant-btn-primary"
-  type="button"
->
-  <span>
-    Open drawer
-  </span>
-</button>
+HTMLCollection [
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Open drawer
+    </span>
+  </button>,
+  <div
+    class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+    tabindex="-1"
+  >
+    <div
+      class="ant-drawer-mask ant-drawer-mask-motion-appear ant-drawer-mask-motion-appear-active ant-drawer-mask-motion"
+    />
+    <div
+      aria-hidden="true"
+      data-sentinel="start"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+    <div
+      class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+      style="width: 520px; transform: translateX(-180px);"
+    >
+      <div
+        aria-modal="true"
+        class="ant-drawer-content"
+        role="dialog"
+      >
+        <div
+          class="ant-drawer-wrapper-body"
+        >
+          <div
+            class="ant-drawer-header"
+          >
+            <div
+              class="ant-drawer-header-title"
+            >
+              <div
+                class="ant-drawer-title"
+              >
+                Multi-level drawer
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-drawer-body"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              <span>
+                Two-level drawer
+              </span>
+            </button>
+            <div
+              class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+              tabindex="-1"
+            >
+              <div
+                class="ant-drawer-mask ant-drawer-mask-motion-appear ant-drawer-mask-motion-appear-active ant-drawer-mask-motion"
+              />
+              <div
+                aria-hidden="true"
+                data-sentinel="start"
+                style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+                tabindex="0"
+              />
+              <div
+                class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+                style="width: 320px;"
+              >
+                <div
+                  aria-modal="true"
+                  class="ant-drawer-content"
+                  role="dialog"
+                >
+                  <div
+                    class="ant-drawer-wrapper-body"
+                  >
+                    <div
+                      class="ant-drawer-header"
+                    >
+                      <div
+                        class="ant-drawer-header-title"
+                      >
+                        <div
+                          class="ant-drawer-title"
+                        >
+                          Two-level Drawer
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="ant-drawer-body"
+                    >
+                      This is two-level drawer
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                aria-hidden="true"
+                data-sentinel="end"
+                style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+                tabindex="0"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      data-sentinel="end"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+  </div>,
+]
 `;
 
 exports[`renders ./components/drawer/demo/no-mask.md extend context correctly 1`] = `
-<button
-  class="ant-btn ant-btn-primary"
-  type="button"
->
-  <span>
-    Open
-  </span>
-</button>
+HTMLCollection [
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Open
+    </span>
+  </button>,
+  <div
+    class="ant-drawer ant-drawer-right no-mask ant-drawer-open ant-drawer-inline"
+    tabindex="-1"
+  >
+    <div
+      aria-hidden="true"
+      data-sentinel="start"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+    <div
+      class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+      style="width: 333px; background: red; border-radius: 20px; box-shadow: -5px 0 5px green; overflow: hidden;"
+    >
+      <div
+        aria-modal="true"
+        class="ant-drawer-content"
+        role="dialog"
+      >
+        <div
+          class="ant-drawer-wrapper-body"
+        >
+          <div
+            class="ant-drawer-header"
+          >
+            <div
+              class="ant-drawer-header-title"
+            >
+              <button
+                aria-label="Close"
+                class="ant-drawer-close"
+                type="button"
+              >
+                <span
+                  aria-label="close"
+                  class="anticon anticon-close"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                    />
+                  </svg>
+                </span>
+              </button>
+              <div
+                class="ant-drawer-title"
+              >
+                Drawer without mask
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-drawer-body"
+          >
+            <p>
+              Some contents...
+            </p>
+            <p>
+              Some contents...
+            </p>
+            <p>
+              Some contents...
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      data-sentinel="end"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+  </div>,
+]
 `;
 
 exports[`renders ./components/drawer/demo/placement.md extend context correctly 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center"
->
+HTMLCollection [
   <div
-    class="ant-space-item"
-    style="margin-right: 8px;"
+    class="ant-space ant-space-horizontal ant-space-align-center"
   >
     <div
-      class="ant-radio-group ant-radio-group-outline"
+      class="ant-space-item"
+      style="margin-right: 8px;"
     >
-      <label
-        class="ant-radio-wrapper"
+      <div
+        class="ant-radio-group ant-radio-group-outline"
       >
-        <span
-          class="ant-radio"
+        <label
+          class="ant-radio-wrapper"
         >
-          <input
-            class="ant-radio-input"
-            type="radio"
-            value="top"
-          />
           <span
-            class="ant-radio-inner"
-          />
-        </span>
-        <span>
-          top
-        </span>
-      </label>
-      <label
-        class="ant-radio-wrapper"
-      >
-        <span
-          class="ant-radio"
+            class="ant-radio"
+          >
+            <input
+              class="ant-radio-input"
+              type="radio"
+              value="top"
+            />
+            <span
+              class="ant-radio-inner"
+            />
+          </span>
+          <span>
+            top
+          </span>
+        </label>
+        <label
+          class="ant-radio-wrapper"
         >
-          <input
-            class="ant-radio-input"
-            type="radio"
-            value="right"
-          />
           <span
-            class="ant-radio-inner"
-          />
-        </span>
-        <span>
-          right
-        </span>
-      </label>
-      <label
-        class="ant-radio-wrapper"
-      >
-        <span
-          class="ant-radio"
+            class="ant-radio"
+          >
+            <input
+              class="ant-radio-input"
+              type="radio"
+              value="right"
+            />
+            <span
+              class="ant-radio-inner"
+            />
+          </span>
+          <span>
+            right
+          </span>
+        </label>
+        <label
+          class="ant-radio-wrapper"
         >
-          <input
-            class="ant-radio-input"
-            type="radio"
-            value="bottom"
-          />
           <span
-            class="ant-radio-inner"
-          />
-        </span>
-        <span>
-          bottom
-        </span>
-      </label>
-      <label
-        class="ant-radio-wrapper ant-radio-wrapper-checked"
-      >
-        <span
-          class="ant-radio ant-radio-checked"
+            class="ant-radio"
+          >
+            <input
+              class="ant-radio-input"
+              type="radio"
+              value="bottom"
+            />
+            <span
+              class="ant-radio-inner"
+            />
+          </span>
+          <span>
+            bottom
+          </span>
+        </label>
+        <label
+          class="ant-radio-wrapper ant-radio-wrapper-checked"
         >
-          <input
-            checked=""
-            class="ant-radio-input"
-            type="radio"
-            value="left"
-          />
           <span
-            class="ant-radio-inner"
-          />
-        </span>
-        <span>
-          left
-        </span>
-      </label>
+            class="ant-radio ant-radio-checked"
+          >
+            <input
+              checked=""
+              class="ant-radio-input"
+              type="radio"
+              value="left"
+            />
+            <span
+              class="ant-radio-inner"
+            />
+          </span>
+          <span>
+            left
+          </span>
+        </label>
+      </div>
     </div>
-  </div>
-  <div
-    class="ant-space-item"
-  >
-    <button
-      class="ant-btn ant-btn-primary"
-      type="button"
+    <div
+      class="ant-space-item"
     >
-      <span>
-        Open
-      </span>
-    </button>
-  </div>
-</div>
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          Open
+        </span>
+      </button>
+    </div>
+  </div>,
+  <div
+    class="ant-drawer ant-drawer-left ant-drawer-open ant-drawer-inline"
+    tabindex="-1"
+  >
+    <div
+      class="ant-drawer-mask ant-drawer-mask-motion-appear ant-drawer-mask-motion-appear-active ant-drawer-mask-motion"
+    />
+    <div
+      aria-hidden="true"
+      data-sentinel="start"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+    <div
+      class="ant-drawer-content-wrapper ant-drawer-panel-motion-left-appear ant-drawer-panel-motion-left-appear-active ant-drawer-panel-motion-left"
+      style="width: 378px;"
+    >
+      <div
+        aria-modal="true"
+        class="ant-drawer-content"
+        role="dialog"
+      >
+        <div
+          class="ant-drawer-wrapper-body"
+        >
+          <div
+            class="ant-drawer-header"
+          >
+            <div
+              class="ant-drawer-header-title"
+            >
+              <div
+                class="ant-drawer-title"
+              >
+                Basic Drawer
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-drawer-body"
+          >
+            <p>
+              Some contents...
+            </p>
+            <p>
+              Some contents...
+            </p>
+            <p>
+              Some contents...
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      data-sentinel="end"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+  </div>,
+]
 `;
 
 exports[`renders ./components/drawer/demo/render-in-current.md extend context correctly 1`] = `
@@ -415,12 +2919,12 @@ exports[`renders ./components/drawer/demo/render-in-current.md extend context co
       tabindex="0"
     />
     <div
-      class="ant-drawer-content-wrapper"
+      class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
       style="width: 378px;"
     >
       <div
         aria-modal="true"
-        class="ant-drawer-content ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+        class="ant-drawer-content"
         role="dialog"
       >
         <div
@@ -460,144 +2964,602 @@ exports[`renders ./components/drawer/demo/render-in-current.md extend context co
 `;
 
 exports[`renders ./components/drawer/demo/size.md extend context correctly 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center"
->
+HTMLCollection [
   <div
-    class="ant-space-item"
-    style="margin-right: 8px;"
+    class="ant-space ant-space-horizontal ant-space-align-center"
   >
-    <button
-      class="ant-btn ant-btn-primary"
-      type="button"
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px;"
     >
-      <span>
-        Open Default Size (378px)
-      </span>
-    </button>
-  </div>
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          Open Default Size (378px)
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          Open Large Size (736px)
+        </span>
+      </button>
+    </div>
+  </div>,
   <div
-    class="ant-space-item"
+    class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+    tabindex="-1"
   >
-    <button
-      class="ant-btn ant-btn-primary"
-      type="button"
+    <div
+      class="ant-drawer-mask ant-drawer-mask-motion-appear ant-drawer-mask-motion-appear-active ant-drawer-mask-motion"
+    />
+    <div
+      aria-hidden="true"
+      data-sentinel="start"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+    <div
+      class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+      style="width: 378px;"
     >
-      <span>
-        Open Large Size (736px)
-      </span>
-    </button>
-  </div>
-</div>
+      <div
+        aria-modal="true"
+        class="ant-drawer-content"
+        role="dialog"
+      >
+        <div
+          class="ant-drawer-wrapper-body"
+        >
+          <div
+            class="ant-drawer-header"
+          >
+            <div
+              class="ant-drawer-header-title"
+            >
+              <button
+                aria-label="Close"
+                class="ant-drawer-close"
+                type="button"
+              >
+                <span
+                  aria-label="close"
+                  class="anticon anticon-close"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                    />
+                  </svg>
+                </span>
+              </button>
+              <div
+                class="ant-drawer-title"
+              >
+                undefined Drawer
+              </div>
+            </div>
+            <div
+              class="ant-drawer-extra"
+            >
+              <div
+                class="ant-space ant-space-horizontal ant-space-align-center"
+              >
+                <div
+                  class="ant-space-item"
+                  style="margin-right: 8px;"
+                >
+                  <button
+                    class="ant-btn ant-btn-default"
+                    type="button"
+                  >
+                    <span>
+                      Cancel
+                    </span>
+                  </button>
+                </div>
+                <div
+                  class="ant-space-item"
+                >
+                  <button
+                    class="ant-btn ant-btn-primary"
+                    type="button"
+                  >
+                    <span>
+                      OK
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-drawer-body"
+          >
+            <p>
+              Some contents...
+            </p>
+            <p>
+              Some contents...
+            </p>
+            <p>
+              Some contents...
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      data-sentinel="end"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+  </div>,
+]
 `;
 
 exports[`renders ./components/drawer/demo/user-profile.md extend context correctly 1`] = `
-<div
-  class="ant-list ant-list-split ant-list-bordered"
->
+HTMLCollection [
   <div
-    class="ant-spin-nested-loading"
+    class="ant-list ant-list-split ant-list-bordered"
   >
     <div
-      class="ant-spin-container"
+      class="ant-spin-nested-loading"
     >
-      <ul
-        class="ant-list-items"
+      <div
+        class="ant-spin-container"
       >
-        <li
-          class="ant-list-item"
+        <ul
+          class="ant-list-items"
         >
-          <div
-            class="ant-list-item-meta"
+          <li
+            class="ant-list-item"
           >
             <div
-              class="ant-list-item-meta-avatar"
+              class="ant-list-item-meta"
             >
-              <span
-                class="ant-avatar ant-avatar-circle ant-avatar-image"
-              >
-                <img
-                  src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
-                />
-              </span>
-            </div>
-            <div
-              class="ant-list-item-meta-content"
-            >
-              <h4
-                class="ant-list-item-meta-title"
-              >
-                <a
-                  href="https://ant.design/index-cn"
-                >
-                  Lily
-                </a>
-              </h4>
               <div
-                class="ant-list-item-meta-description"
+                class="ant-list-item-meta-avatar"
               >
-                Progresser XTech
+                <span
+                  class="ant-avatar ant-avatar-circle ant-avatar-image"
+                >
+                  <img
+                    src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
+                  />
+                </span>
+              </div>
+              <div
+                class="ant-list-item-meta-content"
+              >
+                <h4
+                  class="ant-list-item-meta-title"
+                >
+                  <a
+                    href="https://ant.design/index-cn"
+                  >
+                    Lily
+                  </a>
+                </h4>
+                <div
+                  class="ant-list-item-meta-description"
+                >
+                  Progresser XTech
+                </div>
               </div>
             </div>
-          </div>
-          <ul
-            class="ant-list-item-action"
-          >
-            <li>
-              <a>
-                View Profile
-              </a>
-            </li>
-          </ul>
-        </li>
-        <li
-          class="ant-list-item"
-        >
-          <div
-            class="ant-list-item-meta"
-          >
-            <div
-              class="ant-list-item-meta-avatar"
+            <ul
+              class="ant-list-item-action"
             >
-              <span
-                class="ant-avatar ant-avatar-circle ant-avatar-image"
-              >
-                <img
-                  src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
-                />
-              </span>
-            </div>
-            <div
-              class="ant-list-item-meta-content"
-            >
-              <h4
-                class="ant-list-item-meta-title"
-              >
-                <a
-                  href="https://ant.design/index-cn"
-                >
-                  Lily
+              <li>
+                <a>
+                  View Profile
                 </a>
-              </h4>
+              </li>
+            </ul>
+          </li>
+          <li
+            class="ant-list-item"
+          >
+            <div
+              class="ant-list-item-meta"
+            >
               <div
-                class="ant-list-item-meta-description"
+                class="ant-list-item-meta-avatar"
               >
-                Progresser XTech
+                <span
+                  class="ant-avatar ant-avatar-circle ant-avatar-image"
+                >
+                  <img
+                    src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
+                  />
+                </span>
+              </div>
+              <div
+                class="ant-list-item-meta-content"
+              >
+                <h4
+                  class="ant-list-item-meta-title"
+                >
+                  <a
+                    href="https://ant.design/index-cn"
+                  >
+                    Lily
+                  </a>
+                </h4>
+                <div
+                  class="ant-list-item-meta-description"
+                >
+                  Progresser XTech
+                </div>
               </div>
             </div>
-          </div>
-          <ul
-            class="ant-list-item-action"
-          >
-            <li>
-              <a>
-                View Profile
-              </a>
-            </li>
-          </ul>
-        </li>
-      </ul>
+            <ul
+              class="ant-list-item-action"
+            >
+              <li>
+                <a>
+                  View Profile
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
     </div>
-  </div>
-</div>
+  </div>,
+  <div
+    class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+    tabindex="-1"
+  >
+    <div
+      class="ant-drawer-mask ant-drawer-mask-motion-appear ant-drawer-mask-motion-appear-active ant-drawer-mask-motion"
+    />
+    <div
+      aria-hidden="true"
+      data-sentinel="start"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+    <div
+      class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+      style="width: 640px;"
+    >
+      <div
+        aria-modal="true"
+        class="ant-drawer-content"
+        role="dialog"
+      >
+        <div
+          class="ant-drawer-wrapper-body"
+        >
+          <div
+            class="ant-drawer-body"
+          >
+            <p
+              class="site-description-item-profile-p"
+              style="margin-bottom: 24px;"
+            >
+              User Profile
+            </p>
+            <p
+              class="site-description-item-profile-p"
+            >
+              Personal
+            </p>
+            <div
+              class="ant-row"
+            >
+              <div
+                class="ant-col ant-col-12"
+              >
+                <div
+                  class="site-description-item-profile-wrapper"
+                >
+                  <p
+                    class="site-description-item-profile-p-label"
+                  >
+                    Full Name
+                    :
+                  </p>
+                  Lily
+                </div>
+              </div>
+              <div
+                class="ant-col ant-col-12"
+              >
+                <div
+                  class="site-description-item-profile-wrapper"
+                >
+                  <p
+                    class="site-description-item-profile-p-label"
+                  >
+                    Account
+                    :
+                  </p>
+                  AntDesign@example.com
+                </div>
+              </div>
+            </div>
+            <div
+              class="ant-row"
+            >
+              <div
+                class="ant-col ant-col-12"
+              >
+                <div
+                  class="site-description-item-profile-wrapper"
+                >
+                  <p
+                    class="site-description-item-profile-p-label"
+                  >
+                    City
+                    :
+                  </p>
+                  HangZhou
+                </div>
+              </div>
+              <div
+                class="ant-col ant-col-12"
+              >
+                <div
+                  class="site-description-item-profile-wrapper"
+                >
+                  <p
+                    class="site-description-item-profile-p-label"
+                  >
+                    Country
+                    :
+                  </p>
+                  China🇨🇳
+                </div>
+              </div>
+            </div>
+            <div
+              class="ant-row"
+            >
+              <div
+                class="ant-col ant-col-12"
+              >
+                <div
+                  class="site-description-item-profile-wrapper"
+                >
+                  <p
+                    class="site-description-item-profile-p-label"
+                  >
+                    Birthday
+                    :
+                  </p>
+                  February 2,1900
+                </div>
+              </div>
+              <div
+                class="ant-col ant-col-12"
+              >
+                <div
+                  class="site-description-item-profile-wrapper"
+                >
+                  <p
+                    class="site-description-item-profile-p-label"
+                  >
+                    Website
+                    :
+                  </p>
+                  -
+                </div>
+              </div>
+            </div>
+            <div
+              class="ant-row"
+            >
+              <div
+                class="ant-col ant-col-24"
+              >
+                <div
+                  class="site-description-item-profile-wrapper"
+                >
+                  <p
+                    class="site-description-item-profile-p-label"
+                  >
+                    Message
+                    :
+                  </p>
+                  Make things as simple as possible but no simpler.
+                </div>
+              </div>
+            </div>
+            <div
+              class="ant-divider ant-divider-horizontal"
+              role="separator"
+            />
+            <p
+              class="site-description-item-profile-p"
+            >
+              Company
+            </p>
+            <div
+              class="ant-row"
+            >
+              <div
+                class="ant-col ant-col-12"
+              >
+                <div
+                  class="site-description-item-profile-wrapper"
+                >
+                  <p
+                    class="site-description-item-profile-p-label"
+                  >
+                    Position
+                    :
+                  </p>
+                  Programmer
+                </div>
+              </div>
+              <div
+                class="ant-col ant-col-12"
+              >
+                <div
+                  class="site-description-item-profile-wrapper"
+                >
+                  <p
+                    class="site-description-item-profile-p-label"
+                  >
+                    Responsibilities
+                    :
+                  </p>
+                  Coding
+                </div>
+              </div>
+            </div>
+            <div
+              class="ant-row"
+            >
+              <div
+                class="ant-col ant-col-12"
+              >
+                <div
+                  class="site-description-item-profile-wrapper"
+                >
+                  <p
+                    class="site-description-item-profile-p-label"
+                  >
+                    Department
+                    :
+                  </p>
+                  XTech
+                </div>
+              </div>
+              <div
+                class="ant-col ant-col-12"
+              >
+                <div
+                  class="site-description-item-profile-wrapper"
+                >
+                  <p
+                    class="site-description-item-profile-p-label"
+                  >
+                    Supervisor
+                    :
+                  </p>
+                  <a>
+                    Lin
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ant-row"
+            >
+              <div
+                class="ant-col ant-col-24"
+              >
+                <div
+                  class="site-description-item-profile-wrapper"
+                >
+                  <p
+                    class="site-description-item-profile-p-label"
+                  >
+                    Skills
+                    :
+                  </p>
+                  C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc.
+                </div>
+              </div>
+            </div>
+            <div
+              class="ant-divider ant-divider-horizontal"
+              role="separator"
+            />
+            <p
+              class="site-description-item-profile-p"
+            >
+              Contacts
+            </p>
+            <div
+              class="ant-row"
+            >
+              <div
+                class="ant-col ant-col-12"
+              >
+                <div
+                  class="site-description-item-profile-wrapper"
+                >
+                  <p
+                    class="site-description-item-profile-p-label"
+                  >
+                    Email
+                    :
+                  </p>
+                  AntDesign@example.com
+                </div>
+              </div>
+              <div
+                class="ant-col ant-col-12"
+              >
+                <div
+                  class="site-description-item-profile-wrapper"
+                >
+                  <p
+                    class="site-description-item-profile-p-label"
+                  >
+                    Phone Number
+                    :
+                  </p>
+                  +86 181 0000 0000
+                </div>
+              </div>
+            </div>
+            <div
+              class="ant-row"
+            >
+              <div
+                class="ant-col ant-col-24"
+              >
+                <div
+                  class="site-description-item-profile-wrapper"
+                >
+                  <p
+                    class="site-description-item-profile-p-label"
+                  >
+                    Github
+                    :
+                  </p>
+                  <a
+                    href="http://github.com/ant-design/ant-design/"
+                  >
+                    github.com/ant-design/ant-design/
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      data-sentinel="end"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+  </div>,
+]
 `;
diff --git a/components/drawer/__tests__/__snapshots__/demo.test.js.snap b/components/drawer/__tests__/__snapshots__/demo.test.js.snap
index 4f380779a7..0da8df00b8 100644
--- a/components/drawer/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/demo.test.js.snap
@@ -320,10 +320,6 @@ exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
       style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
       tabindex="0"
     />
-    <div
-      class="ant-drawer-content-wrapper"
-      style="width:378px"
-    />
     <div
       aria-hidden="true"
       data-sentinel="end"
diff --git a/components/drawer/__tests__/demo-extend.test.tsx b/components/drawer/__tests__/demo-extend.test.tsx
index fa5c055725..35a6bee351 100644
--- a/components/drawer/__tests__/demo-extend.test.tsx
+++ b/components/drawer/__tests__/demo-extend.test.tsx
@@ -8,6 +8,7 @@ jest.mock('rc-drawer', () => {
     const newProps = {
       ...props,
       open: true,
+      getContainer: false,
     };
     return <MockDrawer {...newProps} />;
   };
diff --git a/components/drawer/demo/no-mask.md b/components/drawer/demo/no-mask.md
index a4eba82ac3..d623e57ac4 100644
--- a/components/drawer/demo/no-mask.md
+++ b/components/drawer/demo/no-mask.md
@@ -40,6 +40,13 @@ const App: React.FC = () => {
         mask={false}
         onClose={onClose}
         visible={visible}
+        contentWrapperStyle={{
+          width: 333,
+          background: 'red',
+          borderRadius: 20,
+          boxShadow: '-5px 0 5px green',
+          overflow: 'hidden',
+        }}
       >
         <p>Some contents...</p>
         <p>Some contents...</p>
diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less
index 37396bf0a4..942fa7a6da 100644
--- a/components/drawer/style/drawer.less
+++ b/components/drawer/style/drawer.less
@@ -6,9 +6,12 @@
 
 .@{drawer-prefix-cls} {
   position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   z-index: @zindex-modal;
   pointer-events: none;
-  inset: 0;
 
   &-inline {
     position: absolute;
@@ -17,49 +20,20 @@
   // ====================== Mask ======================
   &-mask {
     position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: @zindex-modal;
     background: @modal-mask-bg;
     pointer-events: auto;
-    inset: 0;
   }
 
   // ==================== Content =====================
   &-content-wrapper {
     position: absolute;
     z-index: @zindex-modal;
-    transition: transform @animation-duration-slow;
-
-    // Placement
-    .@{drawer-prefix-cls}-left & {
-      top: 0;
-      bottom: 0;
-      left: 0;
-    }
-
-    .@{drawer-prefix-cls}-right & {
-      top: 0;
-      right: 0;
-      bottom: 0;
-    }
-
-    .@{drawer-prefix-cls}-top & {
-      top: 0;
-      right: 0;
-      left: 0;
-    }
-
-    .@{drawer-prefix-cls}-bottom & {
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-  }
-
-  &-content {
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    pointer-events: auto;
+    transition: all @animation-duration-slow;
 
     &-hidden {
       display: none;
@@ -67,32 +41,48 @@
 
     // Placement
     .@{drawer-prefix-cls}-left & {
+      top: 0;
+      bottom: 0;
+      left: 0;
       box-shadow: @shadow-1-right;
     }
 
     .@{drawer-prefix-cls}-right & {
+      top: 0;
+      right: 0;
+      bottom: 0;
       box-shadow: @shadow-1-left;
     }
 
     .@{drawer-prefix-cls}-top & {
+      top: 0;
+      right: 0;
+      left: 0;
       box-shadow: @shadow-1-down;
     }
 
     .@{drawer-prefix-cls}-bottom & {
+      right: 0;
+      bottom: 0;
+      left: 0;
       box-shadow: @shadow-1-up;
     }
   }
 
-  // @drawer-footer-padding-vertical: @modal-footer-padding-vertical;
-  // @drawer-footer-padding-horizontal: @modal-footer-padding-horizontal;
-  // @drawer-header-close-size: 56px;
+  &-content {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background: @drawer-bg;
+    pointer-events: auto;
+  }
+
   // ===================== Panel ======================
   &-wrapper-body {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
-    background: @drawer-bg;
   }
 
   // Header
@@ -168,247 +158,3 @@
     border-top: @border-width-base @border-style-base @border-color-split;
   }
 }
-
-// .@{drawer-prefix-cls} {
-//   @drawer-header-close-padding: ceil(((@drawer-header-close-size - @font-size-lg) / 2));
-
-//   position: fixed;
-//   z-index: @zindex-modal;
-//   width: 0%;
-//   height: 100%;
-//   transition: width 0s ease @animation-duration-slow, height 0s ease @animation-duration-slow;
-
-//   &-content-wrapper {
-//     position: absolute;
-//     width: 100%;
-//     height: 100%;
-//     transition: transform @animation-duration-slow @drawer-animation-ease,
-//       box-shadow @animation-duration-slow @drawer-animation-ease;
-//   }
-
-//   .@{drawer-prefix-cls}-content {
-//     width: 100%;
-//     height: 100%;
-//   }
-
-//   &-left,
-//   &-right {
-//     top: 0;
-//     width: 0%;
-//     height: 100%;
-//     .@{drawer-prefix-cls}-content-wrapper {
-//       height: 100%;
-//     }
-//     &.@{drawer-prefix-cls}-open {
-//       width: 100%;
-//       transition: transform @animation-duration-slow @drawer-animation-ease;
-//     }
-//   }
-
-//   &-left {
-//     left: 0;
-
-//     .@{drawer-prefix-cls} {
-//       &-content-wrapper {
-//         left: 0;
-//       }
-//     }
-
-//     &.@{drawer-prefix-cls}-open {
-//       .@{drawer-prefix-cls}-content-wrapper {
-//         box-shadow: @shadow-1-right;
-//       }
-//     }
-//   }
-
-//   &-right {
-//     right: 0;
-
-//     .@{drawer-prefix-cls} {
-//       &-content-wrapper {
-//         right: 0;
-//       }
-//     }
-//     &.@{drawer-prefix-cls}-open {
-//       .@{drawer-prefix-cls}-content-wrapper {
-//         box-shadow: @shadow-1-left;
-//       }
-//       // https://github.com/ant-design/ant-design/issues/18607, Avoid edge alignment bug.
-//       &.no-mask {
-//         right: 1px;
-//         transform: translateX(1px);
-//       }
-//     }
-//   }
-
-//   &-top,
-//   &-bottom {
-//     left: 0;
-//     width: 100%;
-//     height: 0%;
-
-//     .@{drawer-prefix-cls}-content-wrapper {
-//       width: 100%;
-//     }
-//     &.@{drawer-prefix-cls}-open {
-//       height: 100%;
-//       transition: transform @animation-duration-slow @drawer-animation-ease;
-//     }
-//   }
-
-//   &-top {
-//     top: 0;
-
-//     &.@{drawer-prefix-cls}-open {
-//       .@{drawer-prefix-cls}-content-wrapper {
-//         box-shadow: @shadow-1-down;
-//       }
-//     }
-//   }
-
-//   &-bottom {
-//     bottom: 0;
-
-//     .@{drawer-prefix-cls} {
-//       &-content-wrapper {
-//         bottom: 0;
-//       }
-//     }
-//     &.@{drawer-prefix-cls}-open {
-//       .@{drawer-prefix-cls}-content-wrapper {
-//         box-shadow: @shadow-1-up;
-//       }
-
-//       &.no-mask {
-//         bottom: 1px;
-//         transform: translateY(1px);
-//       }
-//     }
-//   }
-
-//   &.@{drawer-prefix-cls}-open .@{drawer-prefix-cls}-mask {
-//     height: 100%;
-//     opacity: 1;
-//     transition: none;
-//     animation: antdDrawerFadeIn @animation-duration-slow @drawer-animation-ease;
-//     pointer-events: auto;
-//   }
-
-//   &-title {
-//     flex: 1;
-//     margin: 0;
-//     color: @heading-color;
-//     font-weight: 500;
-//     font-size: @drawer-title-font-size;
-//     line-height: @drawer-title-line-height;
-//   }
-
-//   &-content {
-//     position: relative;
-//     z-index: 1;
-//     overflow: auto;
-//     background-color: @drawer-bg;
-//     background-clip: padding-box;
-//     border: 0;
-//   }
-
-//   &-close {
-//     display: inline-block;
-//     margin-right: 12px;
-//     color: @modal-close-color;
-//     font-weight: 700;
-//     font-size: @font-size-lg;
-//     font-style: normal;
-//     line-height: 1;
-//     text-align: center;
-//     text-transform: none;
-//     text-decoration: none;
-//     background: transparent;
-//     border: 0;
-//     outline: 0;
-//     cursor: pointer;
-//     transition: color @animation-duration-slow;
-//     text-rendering: auto;
-
-//     &:focus,
-//     &:hover {
-//       color: @icon-color-hover;
-//       text-decoration: none;
-//     }
-//   }
-
-//   &-header {
-//     position: relative;
-//     display: flex;
-//     align-items: center;
-//     justify-content: space-between;
-//     padding: @drawer-header-padding;
-//     color: @text-color;
-//     background: @drawer-bg;
-//     border-bottom: @border-width-base @border-style-base @border-color-split;
-//     border-radius: @border-radius-base @border-radius-base 0 0;
-
-//     &-title {
-//       display: flex;
-//       flex: 1;
-//       align-items: center;
-//       justify-content: space-between;
-//     }
-
-//     &-close-only {
-//       padding-bottom: 0;
-//       border: none;
-//     }
-//   }
-
-//   &-wrapper-body {
-//     display: flex;
-//     flex-flow: column nowrap;
-//     width: 100%;
-//     height: 100%;
-//   }
-
-//   &-body {
-//     flex-grow: 1;
-//     padding: @drawer-body-padding;
-//     overflow: auto;
-//     font-size: @font-size-base;
-//     line-height: @line-height-base;
-//     word-wrap: break-word;
-//   }
-
-//   &-footer {
-//     flex-shrink: 0;
-//     padding: @drawer-footer-padding-vertical @drawer-footer-padding-horizontal;
-//     border-top: @border-width-base @border-style-base @border-color-split;
-//   }
-
-//   &-mask {
-//     position: absolute;
-//     top: 0;
-//     left: 0;
-//     width: 100%;
-//     height: 0;
-//     background-color: @modal-mask-bg;
-//     opacity: 0;
-//     transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
-//     pointer-events: none;
-//   }
-
-//   // =================== Hook Components ===================
-//   .@{picker-prefix-cls} {
-//     &-clear {
-//       background: @popover-background;
-//     }
-//   }
-// }
-
-// @keyframes antdDrawerFadeIn {
-//   0% {
-//     opacity: 0;
-//   }
-
-//   100% {
-//     opacity: 1;
-//   }
-// }
diff --git a/components/drawer/style/motion.less b/components/drawer/style/motion.less
index c5c6b4413f..fc392b484a 100644
--- a/components/drawer/style/motion.less
+++ b/components/drawer/style/motion.less
@@ -6,6 +6,10 @@
   &-enter,
   &-appear,
   &-leave {
+    &-start {
+      transition: none;
+    }
+
     &-active {
       transition: all @animation-duration-slow;
     }
diff --git a/package.json b/package.json
index dd56f87958..97599cefcd 100644
--- a/package.json
+++ b/package.json
@@ -128,7 +128,7 @@
     "rc-checkbox": "~2.3.0",
     "rc-collapse": "~3.3.0",
     "rc-dialog": "~8.9.0",
-    "rc-drawer": "~5.0.0-alpha.8",
+    "rc-drawer": "~5.1.0-alpha.1",
     "rc-dropdown": "~4.0.0",
     "rc-field-form": "~1.27.0",
     "rc-image": "~5.7.0",