feat: add hook useOnClickOutside (#1006)

Author: NikitaCG

src/components/index.ts

@@ -69,3 +69,4 @@ export * from './utils/useFileInput/useFileInput';
 export {useActionHandlers} from './utils/useActionHandlers';
 export {useUniqId} from './utils/useUniqId';
 export {getLayersCount} from './utils/LayerManager';
+export * from './utils/useOutsideClick';

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

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

src/components/utils/useOutsideClick/__tests__/useOutsideClick.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 useOutsideClick 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/useOutsideClick/index.ts

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

src/components/utils/useOutsideClick/useOutsideClick.tsx

@@ -0,0 +1,36 @@
+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(() => {
+        const callback = (e: MouseEvent | TouchEvent) => {
+            const elem = ref?.current;
+
+            if (elem && !elem.contains(e.target as Node) && handler) {
+                handler();
+            }
+        };
+
+        window.addEventListener('mouseup', callback, {capture: true});
+        window.addEventListener('touchend', callback, {capture: true});
+
+        return () => {
+            window.removeEventListener('mouseup', callback, {capture: true});
+            window.removeEventListener('touchend', callback, {capture: true});
+        };
+    }, [handler, ref]);
+};