chore: refactor pos

Author: zombieJ

docs/examples/motion.ts

@@ -10,6 +10,7 @@ export const maskMotion: DrawerProps['maskMotion'] = {
 export const motion: DrawerProps['motion'] = placement => ({
   motionAppear: true,
   motionName: `panel-motion-${placement}`,
+  motionDeadline: 1000,
 });
 
 const motionProps: Partial<DrawerProps> = {

src/Drawer.tsx

@@ -49,6 +49,7 @@ export interface DrawerProps
         onResizeStart?: () => void;
         onResizeEnd?: () => void;
       };
+  focusTriggerAfterClose?: boolean;
 }
 
 const Drawer: React.FC<DrawerProps> = props => {
@@ -77,6 +78,7 @@ const Drawer: React.FC<DrawerProps> = props => {
     onClose,
     resizable,
     defaultSize,
+    focusTriggerAfterClose,
 
     // Refs
     panelRef,
@@ -116,6 +118,7 @@ const Drawer: React.FC<DrawerProps> = props => {
 
       if (
         !nextVisible &&
+        focusTriggerAfterClose !== false &&
         lastActiveRef.current &&
         !popupRef.current?.contains(lastActiveRef.current)
       ) {

src/DrawerPopup.tsx

@@ -24,8 +24,6 @@ export interface PushConfig {
 
 export interface FocusableConfig {
   autoFocus?: boolean;
-  focusTriggerAfterClose?: boolean;
-  trap?: boolean;
 }
 
 export interface DrawerPopupProps
@@ -39,7 +37,7 @@ export interface DrawerPopupProps
 
   // Focus
   autoFocus?: boolean;
-  focusable?: FocusableConfig;
+  focusTrap?: boolean;
 
   // Root
   rootClassName?: string;
@@ -108,7 +106,7 @@ const DrawerPopup: React.ForwardRefRenderFunction<
 
     // Focus
     autoFocus,
-    focusable,
+    focusTrap,
 
     // classNames
     classNames: drawerClassNames,
@@ -157,7 +155,7 @@ const DrawerPopup: React.ForwardRefRenderFunction<
   React.useImperativeHandle(ref, () => panelRef.current);
 
   // ========================= Focusable ==========================
-  useFocusable(() => panelRef.current, open, focusable, autoFocus, mask);
+  useFocusable(() => panelRef.current, open, autoFocus, focusTrap, mask);
 
   // ============================ Push ============================
   const [pushed, setPushed] = React.useState(false);
@@ -321,9 +319,7 @@ const DrawerPopup: React.ForwardRefRenderFunction<
       {...motionProps}
       visible={open}
       forceRender={forceRender}
-      onVisibleChanged={nextVisible => {
-        afterOpenChange?.(nextVisible);
-      }}
+      onVisibleChanged={afterOpenChange}
       removeOnLeave={false}
       leavedClassName={`${prefixCls}-content-wrapper-hidden`}
     >

src/hooks/useFocusable.ts

@@ -1,35 +1,21 @@
 import React from 'react';
-import type { FocusableConfig } from '../DrawerPopup';
 import { useLockFocus } from '@rc-component/util/lib/Dom/focus';
 
 export default function useFocusable(
   getContainer: () => HTMLElement,
   open: boolean,
-  focusable?: FocusableConfig,
   autoFocus?: boolean,
+  focusTrap?: boolean,
   mask?: boolean,
 ) {
-  // Parse config
-  const config = React.useMemo<FocusableConfig>(() => {
-    const merged: FocusableConfig = {
-      trap: mask !== false,
-      focusTriggerAfterClose: true,
-      ...focusable,
-    };
-
-    if (autoFocus !== undefined) {
-      merged.autoFocus = autoFocus;
-    }
-
-    return merged;
-  }, [focusable, autoFocus, mask]);
+  const mergedFocusTrap = focusTrap ?? mask !== false;
 
   // Focus lock
-  useLockFocus(open && config.trap, getContainer);
+  useLockFocus(open && mergedFocusTrap, getContainer);
 
   // Auto Focus
   React.useEffect(() => {
-    if (open && config.autoFocus === true) {
+    if (open && autoFocus === true) {
       getContainer()?.focus({ preventScroll: true });
     }
   }, [open]);