feat: create useOnClickOutside hook

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

@@ -0,0 +1,33 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React from 'react';
+
+import {useOnClickOutside} from '../useOnClickOutside';
+
+export const Demo = () => {
+    const observerRef = React.useRef(null);
+    const [status, setStatus] = React.useState<1 | 0>(0);
+
+    const handleOutsideClick = () => {
+        setStatus(0);
+    };
+
+    const handleClick = () => {
+        setStatus(1);
+    };
+
+    useOnClickOutside({
+        observedRef: observerRef,
+        enabled: true,
+        handleCallback: handleOutsideClick,
+    });
+
+    return (
+        <div>
+            <h1>{status}</h1>
+            <div ref={observerRef} onClick={handleClick}>
+                {'Target'}
+            </div>
+            <div>{'Outside'}</div>
+        </div>
+    );
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import {Demo} from './Demo';
+
+test('Check useOnClickOutside correct work', async () => {
+    render(<Demo />);
+
+    expect(screen.getByRole('heading')).toHaveTextContent('0');
+
+    await userEvent.click(screen.getByText('Target'));
+
+    expect(screen.getByRole('heading')).toHaveTextContent('1');
+
+    await userEvent.click(screen.getByText('Outside'));
+
+    expect(screen.getByRole('heading')).toHaveTextContent('0');
+});

src/components/utils/useOnClickOutside/index.ts

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