feat: support useFocusLock

Author: zombieJ

docs/demo/focus.md

@@ -4,6 +4,6 @@ title: Focus Utils
 
 # Focus Utils Demo
 
-Demonstrates the usage of focus-related utility functions, including `limitTabRange`, `getFocusNodeList`, and `triggerFocus`.
+Demonstrates the usage of focus-related utility functions.
 
 <code src="../examples/focus.tsx"></code>

docs/examples/focus.tsx

@@ -1,21 +1,33 @@
 import React, { useRef } from 'react';
 import {} from '../../src';
+import { lockFocus } from '../../src/Dom/focus';
+import './focus.css';
 
 export default function FocusDemo() {
   const containerRef = useRef<HTMLDivElement>(null);
+  const [locking, setLocking] = React.useState(false);
+
+  React.useEffect(() => {
+    if (locking) {
+      return lockFocus(containerRef.current!);
+    }
+  }, [locking]);
 
   return (
-    <div style={{ padding: 32 }}>
+    <div style={{ padding: 32 }} className="focus-demo">
       <h2>Focus Utils Demo</h2>
 
       {/* External buttons */}
-      <button>External Button 1</button>
+      <button onClick={() => setLocking(!locking)}>
+        Lock ({String(locking)})
+      </button>
 
       {/* Middle container - Tab key cycling is limited within this area */}
       <div
         ref={containerRef}
+        tabIndex={0}
         style={{
-          border: '2px solid #1890ff',
+          border: '2px solid green',
           padding: 24,
           margin: 16,
           borderRadius: 8,

src/Dom/focus.ts

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import isVisible from './isVisible';
 
 type DisabledElement =
@@ -99,12 +100,50 @@ export function triggerFocus(
 // ======================================================
 // ==                    Lock Focus                    ==
 // ======================================================
+let lastFocusElement: HTMLElement | null = null;
 let focusElements: HTMLElement[] = [];
 
-function onWindowFocus(e: FocusEvent) {
-  const lastElement = focusElements[focusElements.length - 1];
+function getLastElement() {
+  return focusElements[focusElements.length - 1];
+}
+
+function hasFocus(element: HTMLElement) {
+  const { activeElement } = document;
+  return element === activeElement || element.contains(activeElement);
+}
+
+function syncFocus() {
+  const lastElement = getLastElement();
+  const { activeElement } = document;
+
+  if (lastElement && !hasFocus(lastElement)) {
+    const focusableList = getFocusNodeList(lastElement);
+
+    const matchElement = focusableList.includes(lastFocusElement as HTMLElement)
+      ? lastFocusElement
+      : focusableList[0];
+
+    matchElement?.focus();
+  } else {
+    lastFocusElement = activeElement as HTMLElement;
+  }
+}
 
-  console.log('lock focus', e.target, lastElement);
+function onWindowKeyDown(e: KeyboardEvent) {
+  if (e.key === 'Tab') {
+    const { activeElement } = document;
+    const lastElement = getLastElement();
+    const focusableList = getFocusNodeList(lastElement);
+    const last = focusableList[focusableList.length - 1];
+
+    if (e.shiftKey && activeElement === focusableList[0]) {
+      // Tab backward on first focusable element
+      lastFocusElement = last;
+    } else if (!e.shiftKey && activeElement === last) {
+      // Tab forward on last focusable element
+      lastFocusElement = focusableList[0];
+    }
+  }
 }
 
 /**
@@ -117,12 +156,24 @@ export function lockFocus(element: HTMLElement): VoidFunction {
   focusElements.push(element);
 
   // Just add event since it will de-duplicate
-  window.addEventListener('focusin', onWindowFocus, true);
+  window.addEventListener('focusin', syncFocus);
+  window.addEventListener('keydown', onWindowKeyDown, true);
+  syncFocus();
 
   return () => {
+    lastFocusElement = null;
     focusElements = focusElements.filter(ele => ele !== element);
     if (focusElements.length === 0) {
-      window.removeEventListener('focusin', onWindowFocus, true);
+      window.removeEventListener('focusin', syncFocus);
+      window.removeEventListener('keydown', onWindowKeyDown, true);
     }
   };
 }
+
+export function useFocusLock(element: HTMLElement | null) {
+  useEffect(() => {
+    if (element) {
+      return lockFocus(element);
+    }
+  }, [element]);
+}