chore: esc

Author: zombieJ

docs/demo/simple.md

@@ -1,4 +1,4 @@
-@duration: 3s;
+@duration: 0.3s;
 
 .mask-motion {
   &-enter,

docs/examples/assets/motion.less

@@ -24,7 +24,9 @@ export default () => {
         forceRender
         {...motionProps}
       >
-        Hello World!
+        <input />
+        <input />
+        <input />
       </Drawer>
       <Drawer
         width="20vw"

docs/examples/forceRender.tsx

@@ -14,6 +14,7 @@ export interface DrawerPanelProps {
   width?: number | string;
   placement: Placement;
   children?: React.ReactNode;
+  onClose?: React.KeyboardEventHandler<HTMLElement>;
 }
 
 const sentinelStyle: React.CSSProperties = {
@@ -26,7 +27,8 @@ const sentinelStyle: React.CSSProperties = {
 
 const DrawerPanel = React.forwardRef<DrawerPanelRef, DrawerPanelProps>(
   (props, ref) => {
-    const { prefixCls, className, style, placement, width, children } = props;
+    const { prefixCls, className, style, placement, width, children, onClose } =
+      props;
 
     // ================================ Refs ================================
     const panelRef = React.useRef<HTMLDivElement>();
@@ -41,20 +43,34 @@ const DrawerPanel = React.forwardRef<DrawerPanelRef, DrawerPanelProps>(
       },
     }));
 
-    const onPanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = ({
-      keyCode,
-      shiftKey,
-    }) => {
+    const onPanelKeyDown: React.KeyboardEventHandler<
+      HTMLDivElement
+    > = event => {
+      const { keyCode, shiftKey } = event;
+
       switch (keyCode) {
+        // Tab active
         case KeyCode.TAB: {
-          if (!shiftKey && document.activeElement === sentinelEndRef.current) {
-            sentinelStartRef.current?.focus({ preventScroll: true });
-          } else if (
-            shiftKey &&
-            document.activeElement === sentinelStartRef.current
-          ) {
-            sentinelEndRef.current?.focus({ preventScroll: true });
+          if (keyCode === KeyCode.TAB) {
+            if (
+              !shiftKey &&
+              document.activeElement === sentinelEndRef.current
+            ) {
+              sentinelStartRef.current?.focus({ preventScroll: true });
+            } else if (
+              shiftKey &&
+              document.activeElement === sentinelStartRef.current
+            ) {
+              sentinelEndRef.current?.focus({ preventScroll: true });
+            }
           }
+          break;
+        }
+
+        // Close
+        case KeyCode.ESC: {
+          onClose(event);
+          break;
         }
       }
     };

docs/examples/simple.tsx

@@ -44,7 +44,9 @@ export interface DrawerPopupProps {
   maskMotion?: CSSMotionProps;
 
   // Events
-  onClose?: React.MouseEventHandler<HTMLElement>;
+  onClose?: (
+    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+  ) => void;
 }
 
 export default function DrawerPopup(props: DrawerPopupProps) {
@@ -115,13 +117,6 @@ export default function DrawerPopup(props: DrawerPopupProps) {
     }
   }, [open]);
 
-  // Auto Focus
-  React.useEffect(() => {
-    if (open && autoFocus) {
-      panelRef.current?.focus();
-    }
-  }, [open, autoFocus]);
-
   React.useEffect(
     () => () => {
       scrollLocker?.unLock();
@@ -130,6 +125,20 @@ export default function DrawerPopup(props: DrawerPopupProps) {
     [],
   );
 
+  // ========================== Control ===========================
+  // Auto Focus
+  React.useEffect(() => {
+    if (open && autoFocus) {
+      panelRef.current?.focus();
+    }
+  }, [open, autoFocus]);
+
+  const onPanelClose: React.KeyboardEventHandler<HTMLDivElement> = event => {
+    if (onClose) {
+      onClose(event);
+    }
+  };
+
   // ============================ Mask ============================
   const maskNode: React.ReactNode = mask && (
     <CSSMotion key="mask" {...maskMotion} visible={open}>
@@ -188,6 +197,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
               }}
               width={width}
               placement={placement}
+              onClose={onPanelClose}
             >
               {children}
             </DrawerPanel>