@thangnqdev/ui 0.2.1 → 0.2.2

package/src/overlays/FocusTrap.tsx

@@ -1,122 +1,122 @@
-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>
-  );
-}
+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>
+  );
+}