WEBREF-21 Fix broken onClickOutside functionality in EventDropDownFilter

The previously used library was broken in the hooks implementation:
Pomax/react-onclickoutside#329

Replaced it with https://www.npmjs.com/package/use-onclickoutside

package.json

@@ -57,6 +57,7 @@
     "styled-components": "^4.4.1",
     "styled-system": "^5.1.4",
     "tinycolor2": "^1.4.1",
+    "use-onclickoutside": "^0.3.1",
     "uuid-encoder": "^1.2.0"
   },
   "devDependencies": {

src/features/events/filters/eventDropdownFilter.js

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import onClickOutside from 'react-onclickoutside'
+import useOnClickOutside from 'use-onclickoutside'
 import { media } from '../../../theme/media'
 import theme from '../../../theme/theme'
 import { Consumer } from '../../../components/appContext'
@@ -105,20 +105,24 @@ const EventDropdownFilter = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false)
 
-  const toggleMenu = () => setIsOpen(!isOpen)
-
-  EventDropdownFilter.handleClickOutside = () => {
-    if (filterName === filterOpen) setIsOpen(false)
-  }
+  const ref = useRef(null)
+  useOnClickOutside(ref, () => {
+    if (filterName === filterOpen) {
+      setIsOpen(!isOpen)
+    }
+  })
 
-  useEffect(() => {
-    closeSiblingFilters(filterName, isOpen)
-  }, [closeSiblingFilters, filterName, isOpen])
+  const toggleMenu = () => setIsOpen(!isOpen)
+  useEffect(() => closeSiblingFilters(filterName, isOpen), [
+    closeSiblingFilters,
+    filterName,
+    isOpen,
+  ])
 
   return (
     <Consumer>
       {context => (
-        <Wrapper>
+        <Wrapper ref={ref}>
           <FilterButton
             aria-controls={filterName}
             aria-expanded={isOpen}
@@ -160,8 +164,4 @@ EventDropdownFilter.defaultProps = {
   sort: null,
 }
 
-const clickOutsideConfig = {
-  handleClickOutside: () => EventDropdownFilter.handleClickOutside,
-}
-
-export default onClickOutside(EventDropdownFilter, clickOutsideConfig)
+export default EventDropdownFilter

yarn.lock

@@ -3608,6 +3608,11 @@ archive-type@^4.0.0:
   dependencies:
     file-type "^4.2.0"
 
+are-passive-events-supported@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/are-passive-events-supported/-/are-passive-events-supported-1.1.1.tgz#3db180a1753a2186a2de50a32cded3ac0979f5dc"
+  integrity sha512-5wnvlvB/dTbfrCvJ027Y4L4gW/6Mwoy1uFSavney0YO++GU+0e/flnjiBBwH+1kh7xNCgCOGvmJC3s32joYbww==
+
 are-we-there-yet@~1.1.2:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
@@ -13032,7 +13037,14 @@ node-object-hash@^2.0.0:
   resolved "https://registry.yarnpkg.com/node-object-hash/-/node-object-hash-2.0.0.tgz#9971fcdb7d254f05016bd9ccf508352bee11116b"
   integrity sha512-VZR0zroAusy1ETZMZiGeLkdu50LGjG5U1KHZqTruqtTyQ2wfWhHG2Ow4nsUbfTFGlaREgNHcCWoM/OzEm6p+NQ==
 
-node-releases@^1.1.29, node-releases@^1.1.47:
+node-releases@^1.1.29:
+  version "1.1.47"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.47.tgz#c59ef739a1fd7ecbd9f0b7cf5b7871e8a8b591e4"
+  integrity sha512-k4xjVPx5FpwBUj0Gw7uvFOTF4Ep8Hok1I6qjwL3pLfwe7Y0REQSAqOwwv9TWBCUtMHxcXfY4PgRLRozcChvTcA==
+  dependencies:
+    semver "^6.3.0"
+
+node-releases@^1.1.47:
   version "1.1.48"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.48.tgz#7f647f0c453a0495bcd64cbd4778c26035c2f03a"
   integrity sha512-Hr8BbmUl1ujAST0K0snItzEA5zkJTQup8VNTKNfT6Zw8vTJkIiagUPNfxHmgDOyfFYNfKAul40sD0UEYTvwebw==
@@ -18998,6 +19010,19 @@ use-callback-ref@^1.2.1:
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.1.tgz#898759ccb9e14be6c7a860abafa3ffbd826c89bb"
   integrity sha512-C3nvxh0ZpaOxs9RCnWwAJ+7bJPwQI8LHF71LzbQ3BvzH5XkdtlkMadqElGevg5bYBDFip4sAnD4m06zAKebg1w==
 
+use-latest@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.0.0.tgz#c86d2e4893b15f27def69da574a47136d107facb"
+  integrity sha512-CxmFi75KTXeTIBlZq3LhJ4Hz98pCaRKZHCpnbiaEHIr5QnuHvH8lKYoluPBt/ik7j/hFVPB8K3WqF6mQvLyQTg==
+
+use-onclickoutside@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/use-onclickoutside/-/use-onclickoutside-0.3.1.tgz#fdd723a6a499046b6bc761e4a03af432eee5917b"
+  integrity sha512-aahvbW5+G0XJfzj31FJeLsvc6qdKbzeTsQ8EtkHHq5qTg6bm/qkJeKLcgrpnYeHDDbd7uyhImLGdkbM9BRzOHQ==
+  dependencies:
+    are-passive-events-supported "^1.1.0"
+    use-latest "^1.0.0"
+
 use-sidecar@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.2.tgz#e72f582a75842f7de4ef8becd6235a4720ad8af6"