refactor: Use focus lock hooks instead of sentinel elements (#529)

* chore: init

* chore: focus refactor

* test: clean up

Author: zombieJ

package.json

@@ -52,7 +52,7 @@
   "dependencies": {
     "@rc-component/motion": "^1.1.3",
     "@rc-component/portal": "^2.0.0",
-    "@rc-component/util": "^1.0.1",
+    "@rc-component/util": "^1.5.0",
     "clsx": "^2.1.1"
   },
   "devDependencies": {

src/Dialog/Content/Panel.tsx

@@ -1,22 +1,12 @@
 import { clsx } from 'clsx';
 import { useComposeRef } from '@rc-component/util/lib/ref';
+import { useLockFocus } from '@rc-component/util/lib/Dom/focus';
 import React, { useMemo, useRef } from 'react';
 import { RefContext } from '../../context';
 import type { IDialogPropTypes } from '../../IDialogPropTypes';
 import MemoChildren from './MemoChildren';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
 
-const sentinelStyle: React.CSSProperties = {
-  width: 0,
-  height: 0,
-  overflow: 'hidden',
-  outline: 'none',
-};
-
-const entityStyle: React.CSSProperties = {
-  outline: 'none',
-};
-
 export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
   prefixCls: string;
   ariaId?: string;
@@ -27,7 +17,6 @@ export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
 
 export type PanelRef = {
   focus: () => void;
-  changeActive: (next: boolean) => void;
 };
 
 const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
@@ -58,23 +47,14 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
 
   // ================================= Refs =================================
   const { panel: panelRef } = React.useContext(RefContext);
+  const internalRef = useRef<HTMLDivElement>(null);
+  const mergedRef = useComposeRef(holderRef, panelRef, internalRef);
 
-  const mergedRef = useComposeRef(holderRef, panelRef);
-
-  const sentinelStartRef = useRef<HTMLDivElement>(null);
-  const sentinelEndRef = useRef<HTMLDivElement>(null);
+  useLockFocus(visible, () => internalRef.current);
 
   React.useImperativeHandle(ref, () => ({
     focus: () => {
-      sentinelStartRef.current?.focus({ preventScroll: true });
-    },
-    changeActive: (next) => {
-      const { activeElement } = document;
-      if (next && activeElement === sentinelEndRef.current) {
-        sentinelStartRef.current.focus({ preventScroll: true });
-      } else if (!next && activeElement === sentinelStartRef.current) {
-        sentinelEndRef.current.focus({ preventScroll: true });
-      }
+      internalRef.current?.focus({ preventScroll: true });
     },
   }));
 
@@ -167,13 +147,11 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
       className={clsx(prefixCls, className)}
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}
+      tabIndex={-1}
     >
-      <div ref={sentinelStartRef} tabIndex={0} style={entityStyle}>
-        <MemoChildren shouldUpdate={visible || forceRender}>
-          {modalRender ? modalRender(content) : content}
-        </MemoChildren>
-      </div>
-      <div tabIndex={0} ref={sentinelEndRef} style={sentinelStyle} />
+      <MemoChildren shouldUpdate={visible || forceRender}>
+        {modalRender ? modalRender(content) : content}
+      </MemoChildren>
     </div>
   );
 });

src/Dialog/index.tsx

@@ -47,7 +47,6 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
 
   if (process.env.NODE_ENV !== 'production') {
     ['wrapStyle', 'bodyStyle', 'maskStyle'].forEach((prop) => {
-      // (prop in props) && console.error(`Warning: ${prop} is deprecated, please use styles instead.`)
       warning(!(prop in props), `${prop} is deprecated, please use styles instead.`);
     });
     if ('wrapClassName' in props) {
@@ -148,11 +147,6 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
       onInternalClose(e);
       return;
     }
-
-    // keep focus inside dialog
-    if (visible && e.keyCode === KeyCode.TAB) {
-      contentRef.current.changeActive(!e.shiftKey);
-    }
   }
 
   // ========================= Effect =========================
@@ -200,7 +194,6 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
         className={modalClassNames?.mask}
       />
       <div
-        tabIndex={-1}
         onKeyDown={onWrapperKeyDown}
         className={clsx(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper)}
         ref={wrapperRef}