Add useFocusAway hook

Author: lyzadanger

src/hooks/test/use-focus-away-test.js

@@ -0,0 +1,68 @@
+import { mount } from 'enzyme';
+import { useRef } from 'preact/hooks';
+import { act } from 'preact/test-utils';
+
+import { useFocusAway } from '../use-focus-away';
+
+describe('useFocusAway', () => {
+  let handler;
+
+  const events = [new Event('focus')];
+
+  // Create a fake component to mount in tests that uses the hook
+  function FakeComponent({ enabled = true }) {
+    const myRef = useRef();
+    useFocusAway(myRef, handler, { enabled });
+    return (
+      <div ref={myRef}>
+        <button>Hi</button>
+      </div>
+    );
+  }
+
+  function createComponent(props) {
+    return mount(<FakeComponent {...props} />);
+  }
+
+  beforeEach(() => {
+    handler = sinon.stub();
+  });
+
+  events.forEach(event => {
+    it(`should invoke callback once for events outside of element (${event.type})`, () => {
+      const wrapper = createComponent();
+
+      act(() => {
+        document.body.dispatchEvent(event);
+      });
+      wrapper.update();
+
+      assert.calledOnce(handler);
+
+      // Update the component to change it and re-execute the hook
+      wrapper.setProps({ enabled: false });
+
+      act(() => {
+        document.body.dispatchEvent(new Event('focus'));
+      });
+
+      // Cleanup of hook should have removed eventListeners, so the callback
+      // is not called again
+      assert.calledOnce(handler);
+    });
+  });
+
+  events.forEach(event => {
+    it(`should not invoke callback on events inside of container (${event.type})`, () => {
+      const wrapper = createComponent();
+      const button = wrapper.find('button');
+
+      act(() => {
+        button.getDOMNode().dispatchEvent(event);
+      });
+      wrapper.update();
+
+      assert.equal(handler.callCount, 0);
+    });
+  });
+});

src/hooks/use-focus-away.ts

@@ -0,0 +1,52 @@
+import type { RefObject } from 'preact';
+import { useEffect } from 'preact/hooks';
+
+import { ListenerCollection } from '../util/listener-collection';
+
+type UseFocusAwayOptions = {
+  /**
+   * Enable listening for focus events outside of `container`? Can be set to
+   * false to disable
+   */
+  enabled?: boolean;
+};
+
+/**
+ * Listen on document.body for focus events. If a focus event's target
+ * is outside of the `container` element, invoke the `callback`. Do not listen
+ * if not `enabled`.
+ */
+export function useFocusAway(
+  container: RefObject<HTMLElement | undefined>,
+  callback: (e: FocusEvent) => void,
+  { enabled = true }: UseFocusAwayOptions = {}
+) {
+  useEffect(() => {
+    if (!enabled) {
+      return () => {};
+    }
+    const target = document.body;
+    const listeners = new ListenerCollection();
+
+    listeners.add(
+      target,
+      'focus',
+      event => {
+        if (
+          container.current &&
+          !container.current.contains(event.target as Node)
+        ) {
+          callback(event);
+        }
+      },
+      {
+        // Focus events don't bubble; they need to be handled in the capture phase
+        capture: true,
+      }
+    );
+
+    return () => {
+      listeners.removeAll();
+    };
+  }, [container, enabled, callback]);
+}