refactor: replace ReactElement type annotations with ReactNode in components

apps/meteor/client/navbar/NavBarSearch/NavBarSearchItem.tsx

@@ -1,15 +1,15 @@
 import { SidebarV2Item, SidebarV2ItemAvatarWrapper, SidebarV2ItemTitle } from '@rocket.chat/fuselage';
-import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 
 type NavBarSearchItemProps = {
 	title: string;
-	avatar: ReactElement;
+	avatar: ReactNode;
 	icon: ReactNode;
-	actions?: ReactElement;
+	actions?: ReactNode;
 	href?: string;
 	unread?: boolean;
 	selected?: boolean;
-	badges?: ReactElement;
+	badges?: ReactNode;
 	clickable?: boolean;
 } & Omit<HTMLAttributes<HTMLAnchorElement>, 'is'>;
 

apps/meteor/client/navbar/NavBarSearch/NavBarSearchItemWithData.tsx

@@ -1,6 +1,6 @@
 import { SidebarV2ItemIcon } from '@rocket.chat/fuselage';
 import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import NavBarSearchItem from './NavBarSearchItem';
@@ -12,7 +12,7 @@ import { useUnreadDisplay } from '../../sidebar/hooks/useUnreadDisplay';
 type NavBarSearchItemWithDataProps = {
 	room: SubscriptionWithRoom;
 	id: string;
-	AvatarTemplate: ReactElement;
+	AvatarTemplate: ReactNode;
 } & Partial<ComponentProps<typeof NavBarSearchItem>>;
 
 const NavBarSearchItemWithData = ({ room, AvatarTemplate, ...props }: NavBarSearchItemWithDataProps) => {

apps/meteor/client/navbar/NavBarSearch/NavBarSearchRow.tsx

@@ -1,6 +1,5 @@
 import { RoomAvatar } from '@rocket.chat/ui-avatar';
 import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 import { memo } from 'react';
 
 import NavBarSearchItemWithData from './NavBarSearchItemWithData';
@@ -11,7 +10,7 @@ type NavBarSearchRowProps = {
 	onClick: () => void;
 };
 
-const NavBarSearchRow = ({ room, onClick }: NavBarSearchRowProps): ReactElement => {
+const NavBarSearchRow = ({ room, onClick }: NavBarSearchRowProps) => {
 	const Avatar = <RoomAvatar size='x20' room={{ ...room, _id: room.rid || room._id, type: room.t }} />;
 
 	if (room.t === 'd' && !room.u) {

apps/meteor/client/navbar/NavBarSearch/NavBarSearchUserRow.tsx

@@ -1,7 +1,7 @@
 import { SidebarV2ItemIcon } from '@rocket.chat/fuselage';
 import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
 import { useSetting } from '@rocket.chat/ui-contexts';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import { memo } from 'react';
 
 import NavBarSearchItem from './NavBarSearchItem';
@@ -11,7 +11,7 @@ import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
 type NavBarSearchUserRowProps = {
 	room: SubscriptionWithRoom;
 	id: string;
-	AvatarTemplate: ReactElement;
+	AvatarTemplate: ReactNode;
 } & Partial<ComponentProps<typeof NavBarSearchItem>>;
 
 const NavBarSearchUserRow = ({ room, id, AvatarTemplate, ...props }: NavBarSearchUserRowProps) => {

apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx

@@ -20,7 +20,7 @@ import {
 } from '@rocket.chat/fuselage';
 import { useEffectEvent, useLocalStorage } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useSetting, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
-import type { ReactElement, ChangeEvent, ComponentProps, FormEvent } from 'react';
+import type { ChangeEvent, ComponentProps, FormEvent } from 'react';
 import { useState, useCallback, useId } from 'react';
 
 import UserStatusMenu from '../../../components/UserStatusMenu';
@@ -32,7 +32,7 @@ type EditStatusModalProps = {
 	userStatusText: IUser['statusText'];
 };
 
-const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModalProps): ReactElement => {
+const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModalProps) => {
 	const allowUserStatusMessageChange = useSetting('Accounts_AllowUserStatusMessageChange');
 	const dispatchToastMessage = useToastMessageDispatch();
 	const [customStatus, setCustomStatus] = useLocalStorage<string>('Local_Custom_Status', '');

apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/KeyboardShortcutsModal.tsx

@@ -1,6 +1,5 @@
 import { Box, Divider } from '@rocket.chat/fuselage';
 import { GenericModal } from '@rocket.chat/ui-client';
-import type { ReactElement } from 'react';
 import { Fragment, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -87,7 +86,7 @@ type KeyboardShortcutsModalProps = {
 	onClose: () => void;
 };
 
-const KeyboardShortcutsModal = ({ onClose }: KeyboardShortcutsModalProps): ReactElement => {
+const KeyboardShortcutsModal = ({ onClose }: KeyboardShortcutsModalProps) => {
 	const { t } = useTranslation();
 	const isMac = isMacPlatform();
 

apps/meteor/client/portals/VideoConfPopupPortal.tsx

@@ -1,5 +1,5 @@
 import { AnchorPortal } from '@rocket.chat/ui-client';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { memo } from 'react';
 
 const videoConfAnchorId = 'video-conf-root';
@@ -8,7 +8,7 @@ type VideoConfPortalProps = {
 	children?: ReactNode;
 };
 
-const VideoConfPortal = ({ children }: VideoConfPortalProps): ReactElement => {
+const VideoConfPortal = ({ children }: VideoConfPortalProps) => {
 	return <AnchorPortal id={videoConfAnchorId}>{children}</AnchorPortal>;
 };
 

apps/meteor/client/sidebar/RoomList/SidebarItemTemplateWithData.tsx

@@ -3,7 +3,7 @@ import { SidebarV2Action, SidebarV2Actions, SidebarV2ItemIcon } from '@rocket.ch
 import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
 import { useLayout } from '@rocket.chat/ui-contexts';
 import type { TFunction } from 'i18next';
-import type { AllHTMLAttributes, ComponentType, ReactElement, ReactNode } from 'react';
+import type { AllHTMLAttributes, ComponentType, ReactNode } from 'react';
 import { memo, useMemo } from 'react';
 
 import { RoomIcon } from '../../components/RoomIcon';
@@ -111,7 +111,7 @@ const SidebarItemTemplateWithData = ({
 			aria-current={selected ? 'page' : undefined}
 			href={href}
 			onClick={(): void => {
-				!selected && sidebar.toggle();
+				if (!selected) sidebar.toggle();
 			}}
 			aria-label={showUnread ? t('__unreadTitle__from__roomTitle__', { unreadTitle, roomTitle: title }) : title}
 			title={title}
@@ -124,7 +124,7 @@ const SidebarItemTemplateWithData = ({
 			actions={actions}
 			menu={
 				!isIOsDevice && !isAnonymous && (!isQueued || (isQueued && isPriorityEnabled))
-					? (): ReactElement => (
+					? () => (
 							<RoomMenu
 								alert={alert}
 								threadUnread={unreadCount.threads > 0}
@@ -162,7 +162,6 @@ const keys: (keyof RoomListRowProps)[] = [
 	'videoConfActions',
 ];
 
-// eslint-disable-next-line react/no-multi-comp
 export default memo(SidebarItemTemplateWithData, (prevProps, nextProps) => {
 	if (keys.some((key) => prevProps[key] !== nextProps[key])) {
 		return false;

apps/meteor/client/sidebar/footer/SidebarFooter.tsx

@@ -1,8 +1,6 @@
-import type { ReactElement } from 'react';
-
 import SidebarFooterDefault from './SidebarFooterDefault';
 
-const SidebarFooter = (): ReactElement => {
+const SidebarFooter = () => {
 	return <SidebarFooterDefault />;
 };
 

apps/meteor/client/sidebar/footer/SidebarFooterDefault.tsx

@@ -3,11 +3,10 @@ import { Box, SidebarDivider, Palette, SidebarFooter as Footer } from '@rocket.c
 import { useThemeMode } from '@rocket.chat/ui-client';
 import { useSetting } from '@rocket.chat/ui-contexts';
 import DOMPurify from 'dompurify';
-import type { ReactElement } from 'react';
 
 import { SidebarFooterWatermark } from './SidebarFooterWatermark';
 
-const SidebarFooterDefault = (): ReactElement => {
+const SidebarFooterDefault = () => {
 	const [, , theme] = useThemeMode();
 	const logo = useSetting(theme === 'dark' ? 'Layout_Sidenav_Footer_Dark' : 'Layout_Sidenav_Footer', '').trim();
 

apps/meteor/client/sidebar/footer/SidebarFooterWatermark.tsx

@@ -1,11 +1,10 @@
 import { Box } from '@rocket.chat/fuselage';
 import { useLicense, useLicenseName } from '@rocket.chat/ui-client';
-import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { links } from '../../lib/links';
 
-export const SidebarFooterWatermark = (): ReactElement | null => {
+export const SidebarFooterWatermark = () => {
 	const { t } = useTranslation();
 
 	const response = useLicense();

apps/meteor/client/sidebar/hooks/usePreventDefault.ts

@@ -1,7 +1,7 @@
 import type { RefObject } from 'react';
 import { useEffect } from 'react';
 
-export const usePreventDefault = (ref: RefObject<Element>): { ref: RefObject<Element> } => {
+export const usePreventDefault = (ref: RefObject<Element | null>): { ref: RefObject<Element | null> } => {
 	// Flowrouter uses an addEventListener on the document to capture any clink link, since the react synthetic event use an addEventListener on the document too,
 	// it is impossible/hard to determine which one will happen before and prevent/stop propagation, so feel free to remove this effect after remove flow router :)
 

apps/meteor/client/sidebar/hooks/useShortcutOpenMenu.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import tinykeys from 'tinykeys';
 
 // used to open the menu option by keyboard
-export const useShortcutOpenMenu = (ref: RefObject<Element>): void => {
+export const useShortcutOpenMenu = (ref: RefObject<Element | null>): void => {
 	useEffect(() => {
 		const unsubscribe = tinykeys(ref.current as HTMLElement, {
 			Alt: (event) => {