Add useOutsideClick hook and documentation

Author: paulohfev

src/components/ListItem/DefaultListItem/index.tsx

@@ -42,7 +42,10 @@ const DefaultListItem = <T extends {}>(props: Props<T>) => {
   return (
     <li
       key={key}
-      onClick={e => onClick(e)}
+      onClick={e => {
+        e.stopPropagation();
+        onClick(e);
+      }}
       onKeyDown={e => onKeyDown(e)}
       role='option'
       className={classNames(

src/hooks/useOutsideClick/index.ts

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+
+export const useOutsideClick = (
+  ref: React.RefObject<HTMLDivElement>,
+  callback: (T?: any) => void
+) => {
+  const handleClick = (e: Event) => {
+    if (ref.current && !ref.current.contains(<HTMLElement>e.target)) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [ref, callback]);
+};

src/hooks/useOutsideClick/useOutsideClick.stories.css

@@ -0,0 +1,16 @@
+.dropdown-wrapper {
+  align-items: center;
+  border: 1px solid var(--structure-color-600);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  height: 500px;
+  justify-content: center;
+  width: 500px;
+
+  --dropdown-width: 250px;
+}
+
+.example-toast {
+  --toast-top: 82px;
+}

src/hooks/useOutsideClick/useOutsideClick.stories.mdx

@@ -0,0 +1,18 @@
+# useOutsideClick
+
+Accepts a `callback` as the first argument that is executed when the user clicks outside of an element that is passed as a `ref`
+as a second argument.
+
+```javascript
+import { useRef } from 'react';
+import { useOutsideClick } from '/hooks/useOutsideClick';
+
+const someComponent = () => {
+  [...]
+  const ref = useRef(null);
+
+  useOutsideClick(() => ref, alert('You clicked outside the dropdown'));
+
+  [...]
+}
+```

src/hooks/useOutsideClick/useOutsideClick.stories.tsx

@@ -0,0 +1,84 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Dropdown from '@/components/Dropdown';
+import Toast from '@/components/Toast';
+import { useOutsideClick } from '@/hooks/useOutsideClick';
+import { Meta } from '@storybook/react';
+import styles from './useOutsideClick.stories.css';
+import mdx from './useOutsideClick.stories.mdx';
+
+const Demo = () => {
+  const [selectedItem, setSelectedItem] = useState({});
+  const [wasClicked, setWasClicked] = useState(false);
+  const ref = useRef(null);
+
+  useOutsideClick(ref, () => setWasClicked(true));
+
+  const options = [
+    {
+      label: 'Option 1',
+      value: '1'
+    },
+    {
+      label: 'Option 2',
+      value: '2'
+    }
+  ];
+
+  useEffect(() => {
+    const timer = setTimeout(() => setWasClicked(false), 1000);
+
+    if (wasClicked) {
+      /* eslint-disable no-unused-expressions */
+      timer;
+    }
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [wasClicked]);
+
+  const onChange = item => {
+    setSelectedItem(item);
+  };
+
+  return (
+    <div className={styles['dropdown-wrapper']}>
+      {wasClicked && (
+        <Toast
+          autoCloseInMilliseconds={1000}
+          category='success'
+          message='You clicked outside the Dropdown!'
+          title='Success'
+          variablesClassName={styles['example-toast']}
+        />
+      )}
+
+      <h4>Click outside of the Dropdown</h4>
+      <div ref={ref}>
+        <Dropdown
+          onChange={item => onChange(item)}
+          options={options}
+          getItemLabel={item => item.label}
+          getItemKey={item => item.value}
+          getItemValue={item => item.value}
+          getListTitle={item => item.label}
+          selectorText='Select'
+          value={selectedItem}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'Hooks/useOutsideClick',
+  component: Demo,
+  parameters: {
+    docs: {
+      page: mdx
+    }
+  }
+} as Meta;
+
+const Template = () => <Demo />;
+export const Default = Template.bind({});

src/index.tsx

@@ -29,3 +29,5 @@ export { default as Toggle } from '@/components/Toggle';
 export { default as Tooltip } from '@/components/Tooltip';
 export { default as UploadAvatar } from '@/components/UploadAvatar';
 export * from '@/components/Grid';
+
+export { useOutsideClick } from '@/hooks/useOutsideClick';