support ref objects

dequelabs · Sep 19, 2024 · 11d4af7 · 11d4af7
1 parent 863af09
commit 11d4af7
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/packages/react/src/utils/useEscapeKey.ts b/packages/react/src/utils/useEscapeKey.ts
@@ -11,20 +11,25 @@ const isEscapeKey = (event: KeyboardEvent) =>
  * @example
  * useEscapeKey(() => close())
  */
-export default function useEscapeKey(
+export default function useEscapeKey<T extends HTMLElement = HTMLElement>(
   options: {
     callback: (event: KeyboardEvent) => void;
-    target?: HTMLElement;
     active?: boolean;
     event?: 'keydown' | 'keypress' | 'keyup';
+    target?: T | React.RefObject<T> | React.MutableRefObject<T>;
     defaultPrevented?: boolean;
     capture?: boolean;
   },
   dependencies: DependencyList = []
 ) {
   const callback = options.callback;
   const event = options.event || 'keyup';
-  const target = options.target || document.body;
+  const target = options.target
+    ? 'current' in options.target
+      ? options.target.current
+      : options.target
+    : document.body;
+
   const active = typeof options.active === 'boolean' ? options.active : true;
 
   useEffect(() => {
@@ -39,11 +44,11 @@ export default function useEscapeKey(
     };
 
     if (active) {
-      target.addEventListener(event, eventListener, options?.capture);
+      target?.addEventListener(event, eventListener, options?.capture);
     }
 
     return () => {
-      target.removeEventListener(event, eventListener, options?.capture);
+      target?.removeEventListener(event, eventListener, options?.capture);
     };
   }, [active, event, target, ...dependencies]);
 }