feat: fix review useOutsideClick

Author: NikitaCG

src/components/utils/useOnClickOutside/index.ts

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React from 'react';
 
-import {useOnClickOutside} from '../useOnClickOutside';
+import {useOutsideClick} from '../useOutsideClick';
 
 export const Demo = () => {
     const observerRef = React.useRef(null);
@@ -15,10 +15,9 @@ export const Demo = () => {
         setStatus(1);
     };
 
-    useOnClickOutside({
-        observedRef: observerRef,
-        enabled: true,
-        handleCallback: handleOutsideClick,
+    useOutsideClick({
+        ref: observerRef,
+        handler: handleOutsideClick,
     });
 
     return (

src/components/utils/useOnClickOutside/useOnClickOutside.tsx

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 import {Demo} from './Demo';
 
-test('Check useOnClickOutside correct work', async () => {
+test('Check useOutsideClick correct work', async () => {
     render(<Demo />);
 
     expect(screen.getByRole('heading')).toHaveTextContent('0');

src/components/utils/useOnClickOutside/__tests__/Demo.tsx src/components/utils/useOutsideClick/__tests__/Demo.tsx

@@ -0,0 +1,2 @@
+export {useOutsideClick} from './useOutsideClick';
+export type {UseOutsideClickProps} from './useOutsideClick';

src/components/utils/useOnClickOutside/__tests__/useOnClickOutside.test.tsx src/components/utils/useOutsideClick/__tests__/useOutsideClick.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export interface UseOutsideClickProps<T> {
+    ref: React.RefObject<T>;
+    handler?: () => void;
+}
+
+type UseOutsideClickType = <K extends HTMLElement>(props: UseOutsideClickProps<K>) => void;
+
+/**
+ * Hook for observing clicks outside a given target
+ *
+ * @param ref - purpose of observation
+ * @param handler - callback when a click is triggered outside the observation target
+ *
+ * @return - nothing
+ */
+export const useOutsideClick: UseOutsideClickType = ({ref, handler}) => {
+    React.useEffect(() => {
+        if (ref) {
+            const callback = (e: MouseEvent | TouchEvent) => {
+                const elem = ref?.current;
+
+                if (elem && !elem.contains(e.target as Node) && handler) {
+                    handler();
+                }
+            };
+
+            window.addEventListener('click', callback, {capture: true});
+            window.addEventListener('touchstart', callback, {capture: true});
+
+            return () => {
+                window.removeEventListener('click', callback, {capture: true});
+                window.removeEventListener('touchstart', callback, {capture: true});
+            };
+        }
+
+        return undefined;
+    }, [handler, ref]);
+};