From f4859202f51c8b6266f9e68549f7b1c0d3aaf471 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Thu, 29 Sep 2022 00:05:37 +0800
Subject: [PATCH] fix: Nest Drawer default open show order (#37767)

* chore: bump drawer

* docs: Drawer test demo

* test: Update snapshot

* docs: Update demo

* chore: fix nest style

* chore: trigger CI

* chore: modify bundle size
---
 .../__snapshots__/demo-extend.test.tsx.snap   | 324 ++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap |  98 +++++-
 components/drawer/demo/scroll-debug.md        |  75 ++++
 components/drawer/style/motion.less           |  16 +-
 package.json                                  |   4 +-
 5 files changed, 498 insertions(+), 19 deletions(-)
 create mode 100644 components/drawer/demo/scroll-debug.md

diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
index 035e9ff3e4..297b249ffb 100644
--- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
+++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
@@ -2973,6 +2973,330 @@ exports[`renders ./components/drawer/demo/render-in-current.md extend context co
 </div>
 `;
 
+exports[`renders ./components/drawer/demo/scroll-debug.md extend context correctly 1`] = `
+<div
+  style="position: relative; z-index: 999999;"
+>
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px;"
+    >
+      <button
+        aria-checked="false"
+        class="ant-switch"
+        role="switch"
+        type="button"
+      >
+        <div
+          class="ant-switch-handle"
+        />
+        <span
+          class="ant-switch-inner"
+        >
+          Drawer
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px;"
+    >
+      <button
+        aria-checked="false"
+        class="ant-switch"
+        role="switch"
+        type="button"
+      >
+        <div
+          class="ant-switch-handle"
+        />
+        <span
+          class="ant-switch-inner"
+        >
+          Drawer2
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px;"
+    >
+      <button
+        aria-checked="false"
+        class="ant-switch"
+        role="switch"
+        type="button"
+      >
+        <div
+          class="ant-switch-handle"
+        />
+        <span
+          class="ant-switch-inner"
+        >
+          Modal
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        aria-checked="false"
+        class="ant-switch"
+        role="switch"
+        type="button"
+      >
+        <div
+          class="ant-switch-handle"
+        />
+        <span
+          class="ant-switch-inner"
+        >
+          Modal2
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+    tabindex="-1"
+  >
+    <div
+      class="ant-drawer-mask"
+    />
+    <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; 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"
+            >
+              <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
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-drawer-body"
+          >
+            Some contents...
+            <div
+              class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+              tabindex="-1"
+            >
+              <div
+                class="ant-drawer-mask"
+              />
+              <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;"
+              >
+                <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 Sub
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="ant-drawer-body"
+                    >
+                      Sub contents...
+                    </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>
+  <div
+    class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+    tabindex="-1"
+  >
+    <div
+      class="ant-drawer-mask"
+    />
+    <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;"
+    >
+      <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"
+              >
+                Drawer2
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-drawer-body"
+          >
+            Some contents...
+          </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>
+`;
+
 exports[`renders ./components/drawer/demo/size.md extend context correctly 1`] = `
 Array [
   <div
diff --git a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
index f84b600bed..a99f2f7fd2 100644
--- a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
@@ -311,23 +311,95 @@ exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
       </span>
     </button>
   </div>
+</div>
+`;
+
+exports[`renders ./components/drawer/demo/scroll-debug.md correctly 1`] = `
+<div
+  style="position: relative; z-index: 999999;"
+>
   <div
-    class="ant-drawer ant-drawer-right ant-drawer-inline"
-    style="position: absolute;"
-    tabindex="-1"
+    class="ant-space ant-space-horizontal ant-space-align-center"
   >
     <div
-      aria-hidden="true"
-      data-sentinel="start"
-      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
-      tabindex="0"
-    />
+      class="ant-space-item"
+      style="margin-right: 8px;"
+    >
+      <button
+        aria-checked="false"
+        class="ant-switch"
+        role="switch"
+        type="button"
+      >
+        <div
+          class="ant-switch-handle"
+        />
+        <span
+          class="ant-switch-inner"
+        >
+          Drawer
+        </span>
+      </button>
+    </div>
     <div
-      aria-hidden="true"
-      data-sentinel="end"
-      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
-      tabindex="0"
-    />
+      class="ant-space-item"
+      style="margin-right: 8px;"
+    >
+      <button
+        aria-checked="false"
+        class="ant-switch"
+        role="switch"
+        type="button"
+      >
+        <div
+          class="ant-switch-handle"
+        />
+        <span
+          class="ant-switch-inner"
+        >
+          Drawer2
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px;"
+    >
+      <button
+        aria-checked="false"
+        class="ant-switch"
+        role="switch"
+        type="button"
+      >
+        <div
+          class="ant-switch-handle"
+        />
+        <span
+          class="ant-switch-inner"
+        >
+          Modal
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        aria-checked="false"
+        class="ant-switch"
+        role="switch"
+        type="button"
+      >
+        <div
+          class="ant-switch-handle"
+        />
+        <span
+          class="ant-switch-inner"
+        >
+          Modal2
+        </span>
+      </button>
+    </div>
   </div>
 </div>
 `;
diff --git a/components/drawer/demo/scroll-debug.md b/components/drawer/demo/scroll-debug.md
new file mode 100644
index 0000000000..2e50d6fe65
--- /dev/null
+++ b/components/drawer/demo/scroll-debug.md
@@ -0,0 +1,75 @@
+---
+order: 999
+title:
+  zh-CN: 滚动锁定调试
+  en-US: Scroll Debug
+debug: true
+---
+
+## zh-CN
+
+当 Modal 和 Drawer 共同作用时的滚动锁定调试。
+
+## en-US
+
+Scroll lock debug with Modal & Drawer.
+
+```tsx
+import { Switch, Space, Drawer, Modal } from 'antd';
+import React, { useState } from 'react';
+
+const App: React.FC = () => {
+  const [drawer, setDrawer] = useState(false);
+  const [drawer2, setDrawer2] = useState(false);
+  const [modal, setModal] = useState(false);
+  const [modal2, setModal2] = useState(false);
+
+  return (
+    <div style={{ position: 'relative', zIndex: 999999 }}>
+      <Space>
+        <Switch
+          checkedChildren="Drawer"
+          unCheckedChildren="Drawer"
+          checked={drawer}
+          onChange={() => setDrawer(!drawer)}
+        />
+        <Switch
+          checkedChildren="Drawer2"
+          unCheckedChildren="Drawer2"
+          checked={drawer2}
+          onChange={() => setDrawer2(!drawer2)}
+        />
+        <Switch
+          checkedChildren="Modal"
+          unCheckedChildren="Modal"
+          checked={modal}
+          onChange={() => setModal(!modal)}
+        />
+        <Switch
+          checkedChildren="Modal2"
+          unCheckedChildren="Modal2"
+          checked={modal2}
+          onChange={() => setModal2(!modal2)}
+        />
+      </Space>
+      <Drawer title="Drawer" open={drawer}>
+        Some contents...
+        <Drawer title="Drawer Sub" open={drawer}>
+          Sub contents...
+        </Drawer>
+      </Drawer>
+      <Drawer title="Drawer2" open={drawer2}>
+        Some contents...
+      </Drawer>
+      <Modal title="Modal" open={modal}>
+        Some contents...
+      </Modal>
+      <Modal title="Modal2" open={modal2}>
+        Some contents...
+      </Modal>
+    </div>
+  );
+};
+
+export default App;
+```
diff --git a/components/drawer/style/motion.less b/components/drawer/style/motion.less
index fc392b484a..9df86b75ba 100644
--- a/components/drawer/style/motion.less
+++ b/components/drawer/style/motion.less
@@ -53,7 +53,9 @@
 
       &-enter,
       &-appear {
-        transform: translateX(-100%);
+        &-start {
+          transform: translateX(-100%) !important;
+        }
 
         &-active {
           transform: translateX(0);
@@ -75,7 +77,9 @@
 
       &-enter,
       &-appear {
-        transform: translateX(100%);
+        &-start {
+          transform: translateX(100%) !important;
+        }
 
         &-active {
           transform: translateX(0);
@@ -97,7 +101,9 @@
 
       &-enter,
       &-appear {
-        transform: translateY(-100%);
+        &-start {
+          transform: translateY(-100%) !important;
+        }
 
         &-active {
           transform: translateY(0);
@@ -119,7 +125,9 @@
 
       &-enter,
       &-appear {
-        transform: translateY(100%);
+        &-start {
+          transform: translateY(100%) !important;
+        }
 
         &-active {
           transform: translateY(0);
diff --git a/package.json b/package.json
index 470495e0d3..72b98af437 100644
--- a/package.json
+++ b/package.json
@@ -129,7 +129,7 @@
     "rc-checkbox": "~2.3.0",
     "rc-collapse": "~3.4.2",
     "rc-dialog": "~8.9.0",
-    "rc-drawer": "~5.1.0",
+    "rc-drawer": "~6.0.0",
     "rc-dropdown": "~4.0.0",
     "rc-field-form": "~1.27.0",
     "rc-image": "~5.8.0",
@@ -332,7 +332,7 @@
   "bundlesize": [
     {
       "path": "./dist/antd.min.js",
-      "maxSize": "282 kB"
+      "maxSize": "283 kB"
     },
     {
       "path": "./dist/antd.min.css",