Chore: Migrate useOutsideClick to fuselage-hooks (#24133)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

client/sidebar/header/actions/Search.js

@@ -1,9 +1,8 @@
 import { Sidebar } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useMutableCallback, useOutsideClick } from '@rocket.chat/fuselage-hooks';
 import React, { useState, useEffect, useRef } from 'react';
 import tinykeys from 'tinykeys';
 
-import { useOutsideClick } from '../../../hooks/useOutsideClick';
 import SearchList from '../../search/SearchList';
 
 const Search = (props) => {
@@ -20,7 +19,7 @@ const Search = (props) => {
 		setSearchOpen(true);
 	});
 
-	useOutsideClick(ref, handleCloseSearch);
+	useOutsideClick([ref], handleCloseSearch);
 
 	useEffect(() => {
 		const unsubscribe = tinykeys(window, {

client/sidebar/header/hooks/useDropdownVisibility.ts

@@ -1,8 +1,6 @@
-import { useToggle } from '@rocket.chat/fuselage-hooks';
+import { useToggle, useOutsideClick } from '@rocket.chat/fuselage-hooks';
 import { RefObject, useCallback } from 'react';
 
-import { useOutsideClick } from '../../../hooks/useOutsideClick';
-
 /**
  * useDropdownVisibility
  * is used to control the visibility of a dropdown
@@ -19,7 +17,7 @@ export const useDropdownVisibility = <T extends HTMLElement>({
 	reference,
 	target,
 }: {
-	reference?: RefObject<T>;
+	reference: RefObject<T>;
 	target: RefObject<T>;
 }): {
 	isVisible: boolean;
@@ -28,15 +26,8 @@ export const useDropdownVisibility = <T extends HTMLElement>({
 	const [isVisible, toggle] = useToggle(false);
 
 	useOutsideClick(
-		target,
-		useCallback(
-			(event: MouseEvent) => {
-				if (!reference || !reference.current || !reference.current.contains(event.target as Node)) {
-					toggle(false);
-				}
-			},
-			[reference, toggle],
-		),
+		[target, reference],
+		useCallback(() => toggle(false), [toggle]),
 	);
 
 	return {

package.json

@@ -177,8 +177,8 @@
 		"@rocket.chat/apps-engine": "^1.29.1",
 		"@rocket.chat/css-in-js": "^0.31.0",
 		"@rocket.chat/emitter": "^0.31.0",
-		"@rocket.chat/fuselage": "^0.31.0",
-		"@rocket.chat/fuselage-hooks": "^0.6.3-dev.385",
+		"@rocket.chat/fuselage": "^0.6.3-dev.392",
+		"@rocket.chat/fuselage-hooks": "^0.6.3-dev.392",
 		"@rocket.chat/fuselage-polyfills": "^0.31.0",
 		"@rocket.chat/fuselage-tokens": "^0.31.0",
 		"@rocket.chat/fuselage-ui-kit": "^0.31.0",