fix: remove invalid hook usage in wrapFocus utils

Author: adamalston

packages/react/src/internal/__tests__/wrapFocus-test.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { wrapFocus } from '../wrapFocus';
+import { wrapFocus, wrapFocusWithoutSentinels } from '../wrapFocus';
 
 describe('wrapFocus', () => {
   let node;
@@ -146,3 +146,54 @@ describe('wrapFocus', () => {
     expect(spyInnerModal).toHaveBeenCalled();
   });
 });
+
+describe('wrapFocusWithoutSentinels', () => {
+  let container;
+  let button1;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    container.innerHTML = `
+      <button id="button-0">Button 0</button>
+      <button id="button-1">Button 1</button>
+    `;
+    document.body.appendChild(container);
+    button1 = container.querySelector('#button-1');
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it('should not throw an error when called during keydown event', () => {
+    const event = new KeyboardEvent('keydown', { key: 'Tab' });
+    Object.defineProperty(event, 'shiftKey', { value: false });
+
+    expect(() =>
+      wrapFocusWithoutSentinels({
+        containerNode: container,
+        currentActiveNode: button1,
+        event,
+      })
+    ).not.toThrow();
+  });
+
+  it('should throw an error when called during unsupported event', () => {
+    const event = new FocusEvent('focusin');
+    const originalEnv = process.env.NODE_ENV;
+
+    process.env.NODE_ENV = 'development';
+
+    expect(() =>
+      wrapFocusWithoutSentinels({
+        containerNode: container,
+        currentActiveNode: button1,
+        event,
+      })
+    ).toThrow(
+      /^Error: wrapFocusWithoutSentinels\(\.\.\.\) called in unsupported focusin event\.\s+Call wrapFocusWithoutSentinels\(\.\.\.\) from onKeyDown instead\.$/
+    );
+
+    process.env.NODE_ENV = originalEnv;
+  });
+});

packages/react/src/internal/wrapFocus.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useEffect } from 'react';
 import { tabbable } from 'tabbable';
 import { selectorTabbable } from './keyboard/navigation';
 
@@ -143,16 +142,14 @@ export const wrapFocusWithoutSentinels = ({
 }) => {
   if (!containerNode) return;
 
-  useEffect(() => {
-    if (
-      ['blur', 'focusout', 'focusin', 'focus'].includes(event.type) &&
-      process.env.NODE_ENV !== 'production'
-    ) {
-      throw new Error(
-        `Error: wrapFocusWithoutSentinels(...) called in unsupported ${event.type} event.\n\nCall wrapFocusWithoutSentinels(...) from onKeyDown instead.`
-      );
-    }
-  }, []);
+  if (
+    ['blur', 'focusout', 'focusin', 'focus'].includes(event.type) &&
+    process.env.NODE_ENV !== 'production'
+  ) {
+    throw new Error(
+      `Error: wrapFocusWithoutSentinels(...) called in unsupported ${event.type} event.\n\nCall wrapFocusWithoutSentinels(...) from onKeyDown instead.`
+    );
+  }
 
   // Use `tabbable` to get the focusable elements in tab order.
   // `selectorTabbable` returns elements in DOM order which is why it's not