@thangnqdev/ui 0.1.2 → 0.2.1

package/src/overlays/FocusTrap.tsx

@@ -1,49 +1,122 @@
-import React, { useEffect, useRef } from 'react';
-
-export interface FocusTrapProps {
-  children: React.ReactNode;
-  active?: boolean;
-}
-
-const FOCUSABLE_SELECTOR =
-  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
-
-export function FocusTrap({ children, active = true }: FocusTrapProps) {
-  const rootRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!active) return;
-
-    const root = rootRef.current;
-    if (!root) return;
-
-    const focusable = root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
-
-    if (first) {
-      first.focus();
-    }
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key !== 'Tab') return;
-
-      if (e.shiftKey) {
-        if (document.activeElement === first) {
-          e.preventDefault();
-          last?.focus();
-        }
-      } else {
-        if (document.activeElement === last) {
-          e.preventDefault();
-          first?.focus();
-        }
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [active]);
-
-  return <div ref={rootRef} className="contents">{children}</div>;
-}
+import React, { useEffect, useRef } from 'react';
+
+export interface FocusTrapProps {
+  children: React.ReactNode;
+  active?: boolean;
+  autoFocus?: boolean;
+  restoreFocus?: boolean;
+}
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'textarea:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]',
+].join(', ');
+
+// Global trap stack to handle nested dialogs/popovers correctly
+const trapStack: HTMLElement[] = [];
+
+export function FocusTrap({
+  children,
+  active = true,
+  autoFocus = true,
+  restoreFocus = true,
+}: FocusTrapProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const previousActiveElementRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!active) return;
+
+    if (typeof document !== 'undefined') {
+      previousActiveElementRef.current = document.activeElement as HTMLElement | null;
+    }
+
+    const root = rootRef.current;
+    if (!root) return;
+
+    trapStack.push(root);
+
+    if (autoFocus) {
+      const timer = setTimeout(() => {
+        const focusable = root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+        if (focusable.length > 0) {
+          focusable[0].focus();
+        } else if (typeof root.focus === 'function') {
+          root.focus();
+        }
+      }, 0);
+      return () => clearTimeout(timer);
+    }
+
+    return () => {
+      const idx = trapStack.indexOf(root);
+      if (idx !== -1) trapStack.splice(idx, 1);
+    };
+  }, [active, autoFocus]);
+
+  useEffect(() => {
+    if (!active) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return;
+
+      const root = rootRef.current;
+      if (!root) return;
+
+      // Only topmost trap in the stack handles tab navigation
+      if (trapStack.length > 0 && trapStack[trapStack.length - 1] !== root) {
+        return;
+      }
+
+      const focusable = Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
+        (el) => el.offsetParent !== null || el.getClientRects().length > 0
+      );
+
+      if (focusable.length === 0) {
+        e.preventDefault();
+        root.focus();
+        return;
+      }
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+
+      if (e.shiftKey) {
+        if (document.activeElement === first || !root.contains(document.activeElement)) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last || !root.contains(document.activeElement)) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown, true);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown, true);
+      const root = rootRef.current;
+      if (root) {
+        const idx = trapStack.indexOf(root);
+        if (idx !== -1) trapStack.splice(idx, 1);
+      }
+      if (restoreFocus && previousActiveElementRef.current && typeof previousActiveElementRef.current.focus === 'function') {
+        previousActiveElementRef.current.focus();
+      }
+    };
+  }, [active, restoreFocus]);
+
+  return (
+    <div ref={rootRef} tabIndex={-1} className="contents" style={{ outline: 'none' }}>
+      {children}
+    </div>
+  );
+}