feat: Support focusable (#561)

* chore: init

* feat: support useFocusLock

* chore: refactor pos

* chore: clean up

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>

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> = {

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

@@ -1,7 +1,6 @@
 import { clsx } from 'clsx';
 import type { CSSMotionProps } from '@rc-component/motion';
 import CSSMotion from '@rc-component/motion';
-import KeyCode from '@rc-component/util/lib/KeyCode';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
 import * as React from 'react';
 import type { DrawerContextProps } from './context';
@@ -15,14 +14,7 @@ import useDrag from './hooks/useDrag';
 import { parseWidthHeight } from './util';
 import type { DrawerClassNames, DrawerStyles } from './inter';
 import { useEvent } from '@rc-component/util';
-
-const sentinelStyle: React.CSSProperties = {
-  width: 0,
-  height: 0,
-  overflow: 'hidden',
-  outline: 'none',
-  position: 'absolute',
-};
+import useFocusable from './hooks/useFocusable';
 
 export type Placement = 'left' | 'right' | 'top' | 'bottom';
 
@@ -37,9 +29,12 @@ export interface DrawerPopupProps
   inline?: boolean;
   push?: boolean | PushConfig;
   forceRender?: boolean;
-  autoFocus?: boolean;
   keyboard?: boolean;
 
+  // Focus
+  autoFocus?: boolean;
+  focusTrap?: boolean;
+
   // Root
   rootClassName?: string;
   rootStyle?: React.CSSProperties;
@@ -104,7 +99,10 @@ const DrawerPopup: React.ForwardRefRenderFunction<
     inline,
     push,
     forceRender,
+
+    // Focus
     autoFocus,
+    focusTrap,
 
     // classNames
     classNames: drawerClassNames,
@@ -149,39 +147,11 @@ const DrawerPopup: React.ForwardRefRenderFunction<
 
   // ================================ Refs ================================
   const panelRef = React.useRef<HTMLDivElement>(null);
-  const sentinelStartRef = React.useRef<HTMLDivElement>(null);
-  const sentinelEndRef = React.useRef<HTMLDivElement>(null);
 
   React.useImperativeHandle(ref, () => panelRef.current);
 
-  const onPanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = event => {
-    const { keyCode, shiftKey } = event;
-
-    switch (keyCode) {
-      // Tab active
-      case KeyCode.TAB: {
-        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;
-      }
-    }
-  };
-
-  // ========================== Control ===========================
-  // Auto Focus
-  React.useEffect(() => {
-    if (open && autoFocus) {
-      panelRef.current?.focus({ preventScroll: true });
-    }
-  }, [open]);
+  // ========================= Focusable ==========================
+  useFocusable(() => panelRef.current, open, autoFocus, focusTrap, mask);
 
   // ============================ Push ============================
   const [pushed, setPushed] = React.useState(false);
@@ -345,9 +315,7 @@ const DrawerPopup: React.ForwardRefRenderFunction<
       {...motionProps}
       visible={open}
       forceRender={forceRender}
-      onVisibleChanged={nextVisible => {
-        afterOpenChange?.(nextVisible);
-      }}
+      onVisibleChanged={afterOpenChange}
       removeOnLeave={false}
       leavedClassName={`${prefixCls}-content-wrapper-hidden`}
     >
@@ -404,24 +372,9 @@ const DrawerPopup: React.ForwardRefRenderFunction<
         style={containerStyle}
         tabIndex={-1}
         ref={panelRef}
-        onKeyDown={onPanelKeyDown}
       >
         {maskNode}
-        <div
-          tabIndex={0}
-          ref={sentinelStartRef}
-          style={sentinelStyle}
-          aria-hidden="true"
-          data-sentinel="start"
-        />
         {panelNode}
-        <div
-          tabIndex={0}
-          ref={sentinelEndRef}
-          style={sentinelStyle}
-          aria-hidden="true"
-          data-sentinel="end"
-        />
       </div>
     </DrawerContext.Provider>
   );

src/hooks/useFocusable.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useLockFocus } from '@rc-component/util/lib/Dom/focus';
+
+export default function useFocusable(
+  getContainer: () => HTMLElement,
+  open: boolean,
+  autoFocus?: boolean,
+  focusTrap?: boolean,
+  mask?: boolean,
+) {
+  const mergedFocusTrap = focusTrap ?? mask !== false;
+
+  // Focus lock
+  useLockFocus(open && mergedFocusTrap, getContainer);
+
+  // Auto Focus
+  React.useEffect(() => {
+    if (open && 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();