stuff

dequelabs · Sep 19, 2024 · 3096a8d · 3096a8d
1 parent 11d4af7
commit 3096a8d
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 37 deletions.
diff --git a/packages/react/src/components/Popover/index.tsx b/packages/react/src/components/Popover/index.tsx
@@ -212,7 +212,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         callback: handleClosePopover,
         active: show
       },
-      [handleClosePopover]
+      [show]
     );
 
     if (!show || !isBrowser()) return null;

diff --git a/packages/react/src/components/Tooltip/index.tsx b/packages/react/src/components/Tooltip/index.tsx
@@ -136,14 +136,17 @@ export default function Tooltip({
     initialPlacement;
 
   // Only listen to key ups when the tooltip is visible
-  useEscapeKey({
-    callback: (event) => {
-      event.preventDefault();
-      setShowTooltip(false);
+  useEscapeKey(
+    {
+      callback: (event) => {
+        event.preventDefault();
+        setShowTooltip(false);
+      },
+      capture: true,
+      active: showTooltip && typeof showProp !== 'boolean'
     },
-    capture: true,
-    active: showTooltip && typeof showProp !== 'boolean'
-  });
+    [setShowTooltip]
+  );
 
   // Handle hover and focus events for the targetElement
   useEffect(() => {

diff --git a/packages/react/src/components/TwoColumnPanel/TwoColumnPanel.tsx b/packages/react/src/components/TwoColumnPanel/TwoColumnPanel.tsx
@@ -4,8 +4,7 @@ import React, {
   cloneElement,
   isValidElement,
   useRef,
-  useLayoutEffect,
-  useEffect
+  useLayoutEffect
 } from 'react';
 import { useId } from 'react-id-generator';
 import FocusTrap from 'focus-trap-react';
@@ -223,29 +222,6 @@ const TwoColumnPanel = forwardRef<HTMLDivElement, TwoColumnPanelProps>(
       [setCollapsed]
     );
 
-    useEffect(() => {
-      const handleEscape = (event: KeyboardEvent) => {
-        if (
-          event.key === 'Escape' ||
-          event.key === 'Esc' ||
-          event.keyCode === 27
-        ) {
-          setCollapsed(true);
-        }
-      };
-
-      const targetElement = document.body;
-      if (isFocusTrap) {
-        targetElement.addEventListener('keyup', handleEscape);
-      } else {
-        targetElement.removeEventListener('keyup', handleEscape);
-      }
-
-      return () => {
-        targetElement.removeEventListener('keyup', handleEscape);
-      };
-    }, [isFocusTrap]);
-
     const handleClickOutside = () => {
       if (!isCollapsed && isFocusTrap) {
         setCollapsed(true);

diff --git a/packages/react/src/utils/useEscapeKey.ts b/packages/react/src/utils/useEscapeKey.ts
@@ -13,8 +13,8 @@ const isEscapeKey = (event: KeyboardEvent) =>
  */
 export default function useEscapeKey<T extends HTMLElement = HTMLElement>(
   options: {
-    callback: (event: KeyboardEvent) => void;
     active?: boolean;
+    callback: (event: KeyboardEvent) => void;
     event?: 'keydown' | 'keypress' | 'keyup';
     target?: T | React.RefObject<T> | React.MutableRefObject<T>;
     defaultPrevented?: boolean;
@@ -44,11 +44,19 @@ export default function useEscapeKey<T extends HTMLElement = HTMLElement>(
     };
 
     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]);
+  }, [
+    active,
+    callback,
+    event,
+    target,
+    options.capture,
+    options.defaultPrevented,
+    ...dependencies
+  ]);
 }