Add useOutsideClick hook and documentation

Author: paulohfev

src/hooks/styles.stories.css

@@ -0,0 +1,12 @@
+.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;
+}

src/hooks/useOutsideClick/index.ts

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

src/hooks/useOutsideClick/useOutsideClick.stories.mdx

@@ -0,0 +1 @@
+hello there

src/hooks/useOutsideClick/useOutsideClick.stories.tsx

@@ -0,0 +1,55 @@
+import React, { useState, useRef } from 'react';
+import Dropdown from '@/components/Dropdown';
+import { useOutsideClick } from '@/hooks/useOutsideClick';
+import { Meta } from '@storybook/react';
+import styles from '../styles.stories.css';
+import mdx from './useOutsideClick.stories.mdx';
+
+const Demo = () => {
+  const [selectedItem, setSelectedItem] = useState({});
+  const ref = useRef(null);
+
+  useOutsideClick(() => alert('You clicked outside the dropdown'), ref);
+
+  const options = [
+    {
+      label: 'Option 1',
+      value: '1'
+    },
+    {
+      label: 'Option 2',
+      value: '2'
+    }
+  ];
+
+  return (
+    <div className={styles['dropdown-wrapper']}>
+      <h4>Click outside of the Dropdown</h4>
+      <div ref={ref}>
+        <Dropdown
+          onChange={setSelectedItem}
+          options={options}
+          getItemLabel={item => item.label}
+          getItemKey={item => item.value}
+          getItemValue={item => item.value}
+          getListTitle={item => item.label}
+          selected={selectedItem}
+          selectorText="Select"
+        />
+      </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';