Merge branch 'chore/upgrade-dependencies' into staging

components/ui/dropdown.js

@@ -1,7 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import useOutsideClick from 'hooks/use-outside-click';
+
 const DropdownContent = (props) => {
   const { children, className, ...dropdownContentProps } = props;
   return (
@@ -24,23 +26,7 @@ const DropdownTrigger = (props) => {
 const Dropdown = (props) => {
   const { children, className, disabled } = props;
   const [active, setActive] = useState(false);
-
-  useEffect(() => {
-    window.addEventListener('click', onWindowClick);
-    window.addEventListener('touchstart', onWindowClick);
-
-    return () => {
-      window.removeEventListener('click', onWindowClick);
-      window.removeEventListener('touchstart', onWindowClick);
-    };
-  }, []);
-
-  const onWindowClick = (event) => {
-    const dropdownElement = event.target.closest('.dropdown');
-    if (dropdownElement && !dropdownElement.contains(event.target) && active) {
-      setActive(false);
-    }
-  };
+  const dropdownRef = useRef(null);
 
   const onToggleClick = (event) => {
     event.preventDefault();
@@ -51,6 +37,8 @@ const Dropdown = (props) => {
     }
   };
 
+  useOutsideClick(dropdownRef, () => setActive(false));
+
   const classList = classNames('dropdown', {
     'dropdown--active': active,
     'dropdown--disabled': disabled
@@ -76,11 +64,9 @@ const Dropdown = (props) => {
 
   const cleanProps = { ...props };
   delete cleanProps.active;
-  delete cleanProps.onShow;
-  delete cleanProps.onHide;
 
   return (
-    <div {...cleanProps} className={classList}>
+    <div {...cleanProps} ref={dropdownRef} className={classList}>
       {boundChildren}
     </div>
   );
@@ -89,8 +75,6 @@ const Dropdown = (props) => {
 Dropdown.propTypes = {
   disabled: PropTypes.bool,
   active: PropTypes.bool,
-  onHide: PropTypes.func,
-  onShow: PropTypes.func,
   children: PropTypes.node,
   className: PropTypes.string,
   style: PropTypes.object

hooks/use-outside-click.js

@@ -0,0 +1,20 @@
+import { useEffect, useCallback } from 'react';
+
+export default function useOutsideClick(element, action) {
+  if (typeof action !== 'function') throw new Error('useOutsideClick expects action to be function');
+
+  const handleClickOutside = useCallback((event) => {
+    if (!element.current) return;
+    if (!element.current.contains(event.target)) action();
+  }, [element, action]);
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchStart', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [handleClickOutside]);
+}