feat: support useFocusLock

Author: zombieJ

assets/index.less

@@ -32,6 +32,7 @@
     z-index: @zIndex;
     // overflow: hidden;
     transition: transform @duration;
+    pointer-events: auto;
 
     &-hidden {
       display: none;

docs/examples/base.tsx

@@ -27,6 +27,8 @@ const Demo = () => {
         {...motionProps}
       >
         content
+        <button>Button 1</button>
+        <button>Button 2</button>
       </Drawer>
       <div>
         <button onClick={onSwitch}>打开</button>

package.json

@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@rc-component/motion": "^1.1.4",
-    "@rc-component/portal": "^2.0.0",
+    "@rc-component/portal": "^2.1.3",
     "@rc-component/util": "^1.2.1",
     "clsx": "^2.1.1"
   },

src/DrawerPopup.tsx

@@ -14,7 +14,7 @@ import useDrag from './hooks/useDrag';
 import { parseWidthHeight } from './util';
 import type { DrawerClassNames, DrawerStyles } from './inter';
 import { useEvent } from '@rc-component/util';
-import { useLockFocus } from '@rc-component/util/lib/Dom/focus';
+import useFocusable from './hooks/useFocusable';
 
 export type Placement = 'left' | 'right' | 'top' | 'bottom';
 
@@ -23,7 +23,7 @@ export interface PushConfig {
 }
 
 export interface FocusableConfig {
-  autoFocus?: boolean | string;
+  autoFocus?: boolean;
   focusTriggerAfterClose?: boolean;
   trap?: boolean;
 }
@@ -105,7 +105,10 @@ const DrawerPopup: React.ForwardRefRenderFunction<
     inline,
     push,
     forceRender,
+
+    // Focus
     autoFocus,
+    focusable,
 
     // classNames
     classNames: drawerClassNames,
@@ -153,15 +156,8 @@ const DrawerPopup: React.ForwardRefRenderFunction<
 
   React.useImperativeHandle(ref, () => panelRef.current);
 
-  useLockFocus(open, () => panelRef.current);
-
-  // ========================== Control ===========================
-  // Auto Focus
-  React.useEffect(() => {
-    if (open && autoFocus) {
-      panelRef.current?.focus({ preventScroll: true });
-    }
-  }, [open]);
+  // ========================= Focusable ==========================
+  useFocusable(() => panelRef.current, open, focusable, autoFocus, mask);
 
   // ============================ Push ============================
   const [pushed, setPushed] = React.useState(false);

src/hooks/useFocusable.ts

@@ -0,0 +1,36 @@
+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,
+  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]);
+
+  // Focus lock
+  useLockFocus(open && config.trap, getContainer);
+
+  // Auto Focus
+  React.useEffect(() => {
+    if (open && config.autoFocus === true) {
+      getContainer()?.focus({ preventScroll: true });
+    }
+  }, [open]);
+}

tests/index.spec.tsx

@@ -1,5 +1,4 @@
 import { cleanup, fireEvent, render, act } from '@testing-library/react';
-import KeyCode from '@rc-component/util/lib/KeyCode';
 import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
 import type { DrawerProps } from '../src';
@@ -265,37 +264,6 @@ describe('rc-drawer-menu', () => {
     expect(container.contains(document.activeElement)).toBeTruthy();
   });
 
-  it('tab should always in the content', () => {
-    const { container } = render(
-      <Drawer open getContainer={false}>
-        <div>Hello World</div>
-      </Drawer>,
-    );
-
-    const firstSentinel = container.querySelector<HTMLElement>(
-      '[data-sentinel="start"]',
-    );
-    const lastSentinel = container.querySelector<HTMLElement>(
-      '[data-sentinel="end"]',
-    );
-
-    // First shift to last
-    firstSentinel.focus();
-    fireEvent.keyDown(firstSentinel, {
-      shiftKey: true,
-      keyCode: KeyCode.TAB,
-      which: KeyCode.TAB,
-    });
-    expect(document.activeElement).toBe(lastSentinel);
-
-    // Last tab to first
-    fireEvent.keyDown(lastSentinel, {
-      keyCode: KeyCode.TAB,
-      which: KeyCode.TAB,
-    });
-    expect(document.activeElement).toBe(firstSentinel);
-  });
-
   describe('keyboard', () => {
     it('ESC to exit', () => {
       const onClose = jest.fn();