New version of useEscPressed called useEscPressedV2

Author: Kubit

src/hooks/index.ts

@@ -7,6 +7,7 @@ export * from './useCheckbox/useCheckbox';
 export { useCustomHeightFromChildrens } from './useCustomHeightFromChildrens/useCustomHeightFromChildren';
 export * from './useClickOutside';
 export * from './useKeyPressed/useEscPressed';
+export * from './useEscPressedV2';
 export * from './useKeyPressed/useKeyPressed';
 export * from './useScrollBlock/useScrollBlock';
 export * from './useRoveFocus/useRoveFocus';

src/hooks/useEscPressedV2/index.ts

@@ -0,0 +1 @@
+export * from './useEscPressedV2';

src/hooks/useEscPressedV2/useEscPressedV2.test.ts

@@ -0,0 +1,32 @@
+import { fireEvent } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useEscPressedV2 } from './useEscPressedV2';
+
+describe('useEscPressedV2', () => {
+  const mockRef = { current: document.createElement('div') };
+
+  it('does not call onEscPress when ref is not set', () => {
+    const mockEscPress = jest.fn();
+    renderHook(() => useEscPressedV2({ ref: { current: null }, onEscPress: mockEscPress }));
+    fireEvent.keyDown(mockRef.current, { key: 'Escape' });
+
+    expect(mockEscPress).not.toHaveBeenCalled();
+  });
+
+  it('calls onEscPress when Escape is pressed', () => {
+    const mockEscPress = jest.fn();
+    renderHook(() => useEscPressedV2({ ref: mockRef, onEscPress: mockEscPress }));
+    fireEvent.keyDown(mockRef.current, { key: 'Escape' });
+
+    expect(mockEscPress).toHaveBeenCalled();
+  });
+
+  it('does not call onEscPress when another key is pressed', () => {
+    const mockEscPress = jest.fn();
+    renderHook(() => useEscPressedV2({ ref: mockRef, onEscPress: mockEscPress }));
+    fireEvent.keyDown(mockRef.current, { key: 'A' });
+
+    expect(mockEscPress).not.toHaveBeenCalled();
+  });
+});

src/hooks/useEscPressedV2/useEscPressedV2.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+
+type UseEscPressedV2ParamsType = {
+  ref: React.RefObject<HTMLElement>;
+  onEscPress: (event: KeyboardEvent) => void;
+  disablePreventDefault?: boolean;
+  disableStopPropagation?: boolean;
+};
+
+type UseEscPressedV2ReturnType = void;
+
+export const useEscPressedV2 = ({
+  ref,
+  onEscPress,
+  disablePreventDefault = false,
+  disableStopPropagation = false,
+}: UseEscPressedV2ParamsType): UseEscPressedV2ReturnType => {
+  React.useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        if (!disablePreventDefault) {
+          event.preventDefault();
+        }
+        if (!disableStopPropagation) {
+          event.stopPropagation();
+        }
+        onEscPress(event);
+      }
+    };
+    ref.current.addEventListener('keydown', handleKeyDown);
+    return () => {
+      ref.current?.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onEscPress]);
+};