refactor: remove unnecessary ReactElement type annotations in components

apps/meteor/client/components/Emoji.tsx

@@ -1,5 +1,4 @@
 import styled from '@rocket.chat/styled';
-import type { ReactElement } from 'react';
 
 import { getEmojiClassNameAndDataTitle } from '../lib/utils/renderEmoji';
 
@@ -20,7 +19,7 @@ const EmojiComponent = styled('span', ({ fillContainer: _fillContainer, ...props
 			: ''}
 `;
 
-function Emoji({ emojiHandle, className = undefined, fillContainer }: EmojiProps): ReactElement {
+function Emoji({ emojiHandle, className = undefined, fillContainer }: EmojiProps) {
 	const { className: emojiClassName, image, ...props } = getEmojiClassNameAndDataTitle(emojiHandle);
 
 	return (

apps/meteor/client/components/FingerprintChangeModal.tsx

@@ -1,6 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
 import { ExternalLink, GenericModal } from '@rocket.chat/ui-client';
-import type { ReactElement } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { links } from '../lib/links';
@@ -11,7 +10,7 @@ type FingerprintChangeModalProps = {
 	onClose: () => void;
 };
 
-const FingerprintChangeModal = ({ onConfirm, onCancel, onClose }: FingerprintChangeModalProps): ReactElement => {
+const FingerprintChangeModal = ({ onConfirm, onCancel, onClose }: FingerprintChangeModalProps) => {
 	const { t } = useTranslation();
 	return (
 		<GenericModal

apps/meteor/client/components/FingerprintChangeModalConfirmation.tsx

@@ -1,6 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
 import { ExternalLink, GenericModal } from '@rocket.chat/ui-client';
-import type { ReactElement } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { links } from '../lib/links';
@@ -12,12 +11,7 @@ type FingerprintChangeModalConfirmationProps = {
 	newWorkspace: boolean;
 };
 
-const FingerprintChangeModalConfirmation = ({
-	onConfirm,
-	onCancel,
-	onClose,
-	newWorkspace,
-}: FingerprintChangeModalConfirmationProps): ReactElement => {
+const FingerprintChangeModalConfirmation = ({ onConfirm, onCancel, onClose, newWorkspace }: FingerprintChangeModalConfirmationProps) => {
 	const { t } = useTranslation();
 	return (
 		<GenericModal

apps/meteor/client/components/GazzodownText.tsx

@@ -4,7 +4,7 @@ import type { ChannelMention, UserMention } from '@rocket.chat/gazzodown';
 import { MarkupInteractionContext } from '@rocket.chat/gazzodown';
 import { escapeRegExp } from '@rocket.chat/string-helpers';
 import { useLayout, useRouter, useUserPreference, useUserId, useUserCard } from '@rocket.chat/ui-contexts';
-import type { UIEvent } from 'react';
+import type { UIEvent, ReactNode } from 'react';
 import { useCallback, memo, useMemo } from 'react';
 
 import { normalizeUsername } from '../../lib/utils/normalizeUsername';
@@ -14,7 +14,7 @@ import { useMessageListHighlights, useMessageListShowRealName } from './message/
 import { useGoToRoom } from '../views/room/hooks/useGoToRoom';
 
 type GazzodownTextProps = {
-	children: JSX.Element;
+	children: ReactNode;
 	mentions?: {
 		type?: 'user' | 'team';
 		_id: string;

apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx

@@ -1,13 +1,12 @@
 import { Box, ModalHeroImage } from '@rocket.chat/fuselage';
 import { GenericModal } from '@rocket.chat/ui-client';
-import type { ReactElement, ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 type GenericUpsellModalProps = Omit<ComponentProps<typeof GenericModal>, 'variant' | 'children' | 'onClose' | 'onDismiss'> & {
-	subtitle?: string | ReactElement;
-	description?: string | ReactElement;
+	subtitle?: ReactNode;
+	description?: ReactNode;
 	img: ComponentProps<typeof ModalHeroImage>['src'];
-
 	imgWidth?: ComponentProps<typeof ModalHeroImage>['width'];
 	imgHeight?: ComponentProps<typeof ModalHeroImage>['height'];
 	imgAlt?: string;

apps/meteor/client/components/ListSkeleton.tsx

@@ -1,5 +1,4 @@
 import { Box, Skeleton } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
 import { memo, useMemo } from 'react';
 
 const availablePercentualWidths = [47, 68, 75, 82];
@@ -8,7 +7,7 @@ type ListSkeletonProps = {
 	listCount?: number;
 };
 
-const ListSkeleton = ({ listCount = 2 }: ListSkeletonProps): ReactElement => {
+const ListSkeleton = ({ listCount = 2 }: ListSkeletonProps) => {
 	const widths = useMemo(
 		() => Array.from({ length: listCount }, (_, index) => `${availablePercentualWidths[index % availablePercentualWidths.length]}%`),
 		[listCount],

apps/meteor/client/components/LocalTime.tsx

@@ -1,4 +1,3 @@
-import type { ReactElement } from 'react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -8,7 +7,7 @@ type LocalTimeProps = {
 	utcOffset: number;
 };
 
-const LocalTime = ({ utcOffset }: LocalTimeProps): ReactElement => {
+const LocalTime = ({ utcOffset }: LocalTimeProps) => {
 	const time = useUTCClock(utcOffset);
 	const { t } = useTranslation();
 

apps/meteor/client/components/NotFoundState.tsx

@@ -1,14 +1,13 @@
 import { Box, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage';
 import { useRouter } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 type NotFoundProps = {
 	title: string;
 	subtitle: string;
 };
 
-const NotFoundState = ({ title, subtitle }: NotFoundProps): ReactElement => {
+const NotFoundState = ({ title, subtitle }: NotFoundProps) => {
 	const { t } = useTranslation();
 	const router = useRouter();
 

apps/meteor/client/components/PageSkeleton.tsx

@@ -1,8 +1,7 @@
 import { Box, Button, ButtonGroup, Skeleton } from '@rocket.chat/fuselage';
 import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
-import type { ReactElement } from 'react';
 
-const PageSkeleton = (): ReactElement => (
+const PageSkeleton = () => (
 	<Page>
 		<PageHeader title={<Skeleton width='x320' maxWidth='full' />}>
 			<ButtonGroup>

apps/meteor/client/components/RawText.tsx

@@ -1,9 +1,6 @@
 import DOMPurify from 'dompurify';
-import type { ReactElement } from 'react';
 
 /** @deprecated */
-const RawText = ({ children }: { children: string }): ReactElement => (
-	<span dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(children) }} />
-);
+const RawText = ({ children }: { children: string }) => <span dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(children) }} />;
 
 export default RawText;

apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx

@@ -6,7 +6,7 @@ import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { RoomAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
-import type { ReactElement } from 'react';
+import type { ReactNode } from 'react';
 import { forwardRef, memo, useMemo, useState } from 'react';
 
 type LabelType = { name: string; avatarETag?: string; type: IRoom['t']; encrypted?: IRoom['encrypted'] };
@@ -19,7 +19,7 @@ const generateQuery = (
 
 type RoomAutoCompleteProps = Omit<AutoCompleteProps<LabelType>, 'filter'> & {
 	scope?: 'admin' | 'regular';
-	renderRoomIcon?: (props: { encrypted: IRoom['encrypted']; type: IRoom['t'] }) => ReactElement | null;
+	renderRoomIcon?: (props: { encrypted: IRoom['encrypted']; type: IRoom['t'] }) => ReactNode;
 	setSelectedRoom?: (room: IRoom | undefined) => void;
 };
 

apps/meteor/client/components/RoomAutoCompleteMultiple/RoomAutoCompleteMultiple.tsx

@@ -3,7 +3,7 @@ import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { RoomAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
-import type { ReactElement, ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { memo, useMemo, useState } from 'react';
 
 const generateQuery = (
@@ -16,7 +16,7 @@ type RoomAutoCompleteProps = Omit<ComponentProps<typeof AutoComplete>, 'filter'>
 	readOnly?: boolean;
 };
 
-const RoomAutoCompleteMultiple = ({ value, onChange, ...props }: RoomAutoCompleteProps): ReactElement => {
+const RoomAutoCompleteMultiple = ({ value, onChange, ...props }: RoomAutoCompleteProps) => {
 	const [filter, setFilter] = useState('');
 	const filterDebounced = useDebouncedValue(filter, 300);
 	const autocomplete = useEndpoint('GET', '/v1/rooms.autocomplete.channelAndPrivate');
@@ -50,15 +50,15 @@ const RoomAutoCompleteMultiple = ({ value, onChange, ...props }: RoomAutoComplet
 			filter={filter}
 			setFilter={setFilter}
 			multiple
-			renderSelected={({ selected: { value, label }, onRemove, ...props }): ReactElement => (
+			renderSelected={({ selected: { value, label }, onRemove, ...props }) => (
 				<Chip {...props} key={value} value={value} onClick={onRemove}>
 					<RoomAvatar size='x20' room={{ ...label, type: label?.type || 'c', _id: value }} />
 					<Box is='span' margin='none' mis={4}>
 						{label?.name}
 					</Box>
 				</Chip>
 			)}
-			renderItem={({ value, label, ...props }): ReactElement => (
+			renderItem={({ value, label, ...props }) => (
 				<Option
 					key={value}
 					{...props}

apps/meteor/client/components/RoomIcon/RoomIcon.tsx

@@ -1,7 +1,7 @@
 import type { IRoom } from '@rocket.chat/core-typings';
 import { isOmnichannelRoom } from '@rocket.chat/core-typings';
 import { Icon } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps } from 'react';
 import { isValidElement } from 'react';
 
 import { OmnichannelRoomIcon } from './OmnichannelRoomIcon';
@@ -17,7 +17,7 @@ export const RoomIcon = ({
 	size?: ComponentProps<typeof Icon>['size'];
 	isIncomingCall?: boolean;
 	placement?: 'sidebar' | 'default';
-}): ReactElement | null => {
+}) => {
 	const iconPropsOrReactNode = useRoomIcon(room);
 
 	if (isIncomingCall) {

apps/meteor/client/components/Sidebar/ListItem.tsx

@@ -1,5 +1,5 @@
 import { Option, OptionColumn, OptionContent, OptionIcon, OptionInput } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 
 type ListItemCommonProps = {
 	text: ReactNode;
@@ -20,7 +20,7 @@ type ListItemConditionalProps =
 
 type ListItemProps = ListItemCommonProps & ListItemConditionalProps;
 
-const ListItem = ({ icon, text, input, children, gap, ...props }: ListItemProps): ReactElement => (
+const ListItem = ({ icon, text, input, children, gap, ...props }: ListItemProps) => (
 	<Option {...props}>
 		{icon && <OptionIcon name={icon} />}
 		{gap && <OptionColumn />}

apps/meteor/client/components/Sidebar/SidebarGenericItem.tsx

@@ -1,5 +1,5 @@
 import { Box, SidebarItem } from '@rocket.chat/fuselage';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { memo } from 'react';
 
 type SidebarGenericItemProps = {
@@ -10,7 +10,7 @@ type SidebarGenericItemProps = {
 	externalUrl?: boolean;
 };
 
-const SidebarGenericItem = ({ href, active, externalUrl, children, ...props }: SidebarGenericItemProps): ReactElement => (
+const SidebarGenericItem = ({ href, active, externalUrl, children, ...props }: SidebarGenericItemProps) => (
 	<SidebarItem
 		selected={active}
 		clickable

apps/meteor/client/components/SidebarToggler/SidebarToggler.tsx

@@ -1,12 +1,11 @@
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useEmbeddedLayout } from '@rocket.chat/ui-client';
 import { useLayout, useSession } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 import { memo } from 'react';
 
 import SidebarTogglerButton from './SidebarTogglerButton';
 
-const SideBarToggler = (): ReactElement => {
+const SideBarToggler = () => {
 	const { sidebar } = useLayout();
 	const isLayoutEmbedded = useEmbeddedLayout();
 	const unreadMessagesBadge = useSession('unread') as number | string | undefined;

apps/meteor/client/components/Skeleton.tsx

@@ -1,7 +1,7 @@
 import { Box, Skeleton } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps } from 'react';
 
-export const FormSkeleton = (props: ComponentProps<typeof Box>): ReactElement => (
+export const FormSkeleton = (props: ComponentProps<typeof Box>) => (
 	<Box w='full' pb={24} {...props}>
 		<Skeleton mbe={8} />
 		<Skeleton mbe={4} />

apps/meteor/client/components/TextCopy.tsx

@@ -1,21 +1,21 @@
 import { Box, Button, Scrollable } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import useClipboardWithToast from '../hooks/useClipboardWithToast';
 
-const defaultWrapperRenderer = (text: string): ReactElement => (
+const defaultWrapperRenderer = (text: string) => (
 	<Box fontFamily='mono' alignSelf='center' fontScale='p2' style={{ wordBreak: 'break-all' }} mie={4} flexGrow={1} maxHeight='x108'>
 		{text}
 	</Box>
 );
 
 type TextCopyProps = {
 	text: string;
-	wrapper?: (text: string) => ReactElement;
+	wrapper?: (text: string) => ReactNode;
 } & ComponentProps<typeof Box>;
 
-const TextCopy = ({ text, wrapper = defaultWrapperRenderer, ...props }: TextCopyProps): ReactElement => {
+const TextCopy = ({ text, wrapper = defaultWrapperRenderer, ...props }: TextCopyProps) => {
 	const { t } = useTranslation();
 
 	const { copy } = useClipboardWithToast(text);

apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx

@@ -2,7 +2,6 @@ import { Box, Button } from '@rocket.chat/fuselage';
 import { FieldGroup, TextInput, Field, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage-forms';
 import { GenericModal } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -19,7 +18,7 @@ type TwoFactorEmailFormData = {
 	code: string;
 };
 
-const TwoFactorEmailModal = ({ onConfirm, onClose, emailOrUsername }: TwoFactorEmailModalProps): ReactElement => {
+const TwoFactorEmailModal = ({ onConfirm, onClose, emailOrUsername }: TwoFactorEmailModalProps) => {
 	const dispatchToastMessage = useToastMessageDispatch();
 	const { t } = useTranslation();
 

apps/meteor/client/components/TwoFactorModal/TwoFactorModal.tsx

@@ -1,5 +1,3 @@
-import type { ReactElement } from 'react';
-
 import TwoFactorEmail from './TwoFactorEmailModal';
 import TwoFactorPassword from './TwoFactorPasswordModal';
 import TwoFactorTotp from './TwoFactorTotpModal';
@@ -25,7 +23,7 @@ type TwoFactorModalProps = {
 	  }
 );
 
-const TwoFactorModal = ({ onConfirm, onClose, ...props }: TwoFactorModalProps): ReactElement => {
+const TwoFactorModal = ({ onConfirm, onClose, ...props }: TwoFactorModalProps) => {
 	if (props.method === Method.TOTP) {
 		return <TwoFactorTotp onConfirm={onConfirm} onClose={onClose} />;
 	}

apps/meteor/client/components/TwoFactorModal/TwoFactorPasswordModal.tsx

@@ -1,7 +1,6 @@
 import { Box } from '@rocket.chat/fuselage';
 import { PasswordInput, FieldGroup, Field, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage-forms';
 import { GenericModal } from '@rocket.chat/ui-client';
-import type { ReactElement } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -17,7 +16,7 @@ type TwoFactorPasswordFormData = {
 	password: string;
 };
 
-const TwoFactorPasswordModal = ({ onConfirm, onClose }: TwoFactorPasswordModalProps): ReactElement => {
+const TwoFactorPasswordModal = ({ onConfirm, onClose }: TwoFactorPasswordModalProps) => {
 	const { t } = useTranslation();
 
 	const {

apps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsx

@@ -1,7 +1,6 @@
 import { Box } from '@rocket.chat/fuselage';
 import { FieldGroup, TextInput, Field, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage-forms';
 import { GenericModal } from '@rocket.chat/ui-client';
-import type { ReactElement } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -18,7 +17,7 @@ type TwoFactorTotpFormData = {
 	code: string;
 };
 
-const TwoFactorTotpModal = ({ onConfirm, onClose, onDismiss }: TwoFactorTotpModalProps): ReactElement => {
+const TwoFactorTotpModal = ({ onConfirm, onClose, onDismiss }: TwoFactorTotpModalProps) => {
 	const { t } = useTranslation();
 
 	const {

apps/meteor/client/components/UTCClock.tsx

@@ -1,4 +1,3 @@
-import type { ReactElement } from 'react';
 import { memo } from 'react';
 
 import { useUTCClock } from '../hooks/useUTCClock';
@@ -7,7 +6,7 @@ type UTCClockProps = {
 	utcOffset: number;
 };
 
-const UTCClock = ({ utcOffset }: UTCClockProps): ReactElement => {
+const UTCClock = ({ utcOffset }: UTCClockProps) => {
 	const time = useUTCClock(utcOffset);
 
 	return <>{time}</>;