Remove usages of deprecated useElementShouldClose

src/sidebar/components/Annotation/AnnotationShareControl.tsx

@@ -1,4 +1,8 @@
-import { useElementShouldClose } from '@hypothesis/frontend-shared';
+import {
+  useClickAway,
+  useFocusAway,
+  useKeyPress,
+} from '@hypothesis/frontend-shared';
 import {
   Card,
   IconButton,
@@ -62,8 +66,10 @@ function AnnotationShareControl({
   const toggleSharePanel = () => setOpen(!isOpen);
   const closePanel = () => setOpen(false);
 
-  // Interactions outside of the component when it is open should close it
-  useElementShouldClose(shareRef, isOpen, closePanel);
+  // Interactions outside the component when it is open should close it
+  useClickAway(shareRef, closePanel, { enabled: isOpen });
+  useFocusAway(shareRef, closePanel, { enabled: isOpen });
+  useKeyPress(['Escape'], closePanel, { enabled: isOpen });
 
   useEffect(() => {
     if (wasOpen.current !== isOpen) {
@@ -129,8 +135,8 @@ function AnnotationShareControl({
   return (
     // Make the container div focusable by setting a non-null `tabIndex`.
     // This prevents clicks on non-focusable contents from "leaking out" and
-    // focusing a focusable ancester. If something outside of the panel gains
-    // focus, `useElementShouldClose`'s focus listener will close the panel.
+    // focusing a focusable ancester. If something outside the panel gains
+    // focus, `useFocusAway`'s focus listener will close the panel.
     // "Catch focus" here to prevent this.
     // See https://github.com/hypothesis/client/issues/5196
     <div className="relative" ref={shareRef} tabIndex={-1}>

src/sidebar/components/Annotation/test/AnnotationShareControl-test.js

@@ -88,7 +88,9 @@ describe('AnnotationShareControl', () => {
     $imports.$mock(mockImportedComponents());
     $imports.$mock({
       '@hypothesis/frontend-shared': {
-        useElementShouldClose: sinon.stub(),
+        useClickAway: sinon.stub(),
+        useFocusAway: sinon.stub(),
+        useKeyPress: sinon.stub(),
       },
       '../../helpers/annotation-sharing': {
         isShareableURI: fakeIsShareableURI,

src/sidebar/components/Menu.tsx

@@ -1,4 +1,8 @@
-import { useElementShouldClose } from '@hypothesis/frontend-shared';
+import {
+  useKeyPress,
+  useClickAway,
+  useFocusAway,
+} from '@hypothesis/frontend-shared';
 import { MenuExpandIcon } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 import type { ComponentChildren } from 'preact';
@@ -145,7 +149,9 @@ export default function Menu({
 
   // Menu element should close via `closeMenu` whenever it's open and there
   // are user interactions outside of it (e.g. clicks) in the document
-  useElementShouldClose(menuRef, isOpen, closeMenu);
+  useClickAway(menuRef, closeMenu, { enabled: isOpen });
+  useFocusAway(menuRef, closeMenu, { enabled: isOpen });
+  useKeyPress(['Escape'], closeMenu, { enabled: isOpen });
 
   const stopPropagation = (e: Event) => e.stopPropagation();
 

src/sidebar/components/TagEditor.tsx

@@ -1,4 +1,8 @@
-import { useElementShouldClose } from '@hypothesis/frontend-shared';
+import {
+  useClickAway,
+  useFocusAway,
+  useKeyPress,
+} from '@hypothesis/frontend-shared';
 import { Input } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 import { useRef, useState } from 'preact/hooks';
@@ -45,8 +49,14 @@ function TagEditor({
 
   // Set up callback to monitor outside click events to close the AutocompleteList
   const closeWrapperRef = useRef<HTMLDivElement>(null);
-  useElementShouldClose(closeWrapperRef, suggestionsListOpen, () => {
-    setSuggestionsListOpen(false);
+  useClickAway(closeWrapperRef, () => setSuggestionsListOpen(false), {
+    enabled: suggestionsListOpen,
+  });
+  useFocusAway(inputEl, () => setSuggestionsListOpen(false), {
+    enabled: suggestionsListOpen,
+  });
+  useKeyPress(['Escape'], () => setSuggestionsListOpen(false), {
+    enabled: suggestionsListOpen,
   });
 
   /**
@@ -282,6 +292,7 @@ function TagEditor({
             // Larger font on touch devices
             'text-base touch:text-touch-base',
           )}
+          data-testid="input"
         />
         <AutocompleteList
           id={`${tagEditorId}-AutocompleteList`}

src/sidebar/components/test/Menu-test.js

@@ -112,7 +112,6 @@ describe('Menu', () => {
     new Event('mousedown'),
     new Event('click'),
     ((e = new Event('keydown')), (e.key = 'Escape'), e),
-    new Event('focus'),
   ].forEach(event => {
     it(`closes when the user clicks or presses the mouse outside (${event.type})`, () => {
       const wrapper = createMenu({ defaultOpen: true });
@@ -126,6 +125,20 @@ describe('Menu', () => {
     });
   });
 
+  it('closes when menu loses focus', () => {
+    const wrapper = createMenu({ defaultOpen: true });
+
+    act(() => {
+      wrapper
+        .find(menuSelector)
+        .getDOMNode()
+        .dispatchEvent(new Event('focusout'));
+    });
+    wrapper.update();
+
+    assert.isFalse(isOpen(wrapper));
+  });
+
   it('does not close when user presses non-Escape key outside', () => {
     const wrapper = createMenu({ defaultOpen: true });
 

src/sidebar/components/test/TagEditor-test.js

@@ -224,7 +224,10 @@ describe('TagEditor', () => {
       wrapper.find('input').instance().value = 'non-empty';
       typeInput(wrapper);
       assert.equal(wrapper.find('AutocompleteList').prop('open'), true);
-      document.body.dispatchEvent(new Event('focus'));
+      wrapper
+        .find('input[data-testid="input"]')
+        .getDOMNode()
+        .dispatchEvent(new Event('focusout'));
       wrapper.update();
       assert.equal(wrapper.find('AutocompleteList').prop('open'), false);
     });