fix: Not work in old browser (#36748)

* fix: Drawer contentWrapperStyle logic

* fix: Update style

* test: Update snapshot

* test: More test case

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);
   });

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

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

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"

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} />;
   };

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>

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;
-//   }
-// }

components/drawer/style/motion.less

@@ -6,6 +6,10 @@
   &-enter,
   &-appear,
   &-leave {
+    &-start {
+      transition: none;
+    }
+
     &-active {
       transition: all @animation-duration-slow;
     }

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",