refactor: remove unnecessary ReactElement type annotations in components

apps/meteor/client/hooks/useResizeInlineBreakpoint.ts

@@ -1,10 +1,10 @@
 import { useResizeObserver, useStableArray } from '@rocket.chat/fuselage-hooks';
 import { useMemo } from 'react';
 
-export const useResizeInlineBreakpoint = (sizes: number[] = [], debounceDelay = 0): unknown[] => {
-	const { ref, borderBoxSize } = useResizeObserver({ debounceDelay });
+export const useResizeInlineBreakpoint = <TElement extends Element>(sizes: number[] = [], debounceDelay = 0) => {
+	const { ref, borderBoxSize } = useResizeObserver<TElement>({ debounceDelay });
 	const inlineSize = borderBoxSize ? borderBoxSize.inlineSize : 0;
 	const stableSizes = useStableArray(sizes);
 	const newSizes = useMemo(() => stableSizes.map((current) => (inlineSize ? inlineSize > current : true)), [inlineSize, stableSizes]);
-	return [ref, ...newSizes];
+	return [ref, ...newSizes] as const;
 };

apps/meteor/client/views/account/AccountRouter.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from '@rocket.chat/ui-contexts';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { Suspense, useEffect } from 'react';
 
 import AccountSidebar from './AccountSidebar';
@@ -10,7 +10,7 @@ type AccountRouterProps = {
 	children?: ReactNode;
 };
 
-const AccountRouter = ({ children }: AccountRouterProps): ReactElement => {
+const AccountRouter = ({ children }: AccountRouterProps) => {
 	const router = useRouter();
 
 	useEffect(

apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountPage.tsx

@@ -1,10 +1,9 @@
 import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
-import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import DeviceManagementAccountTable from './DeviceManagementAccountTable';
 
-const DeviceManagementAccountPage = (): ReactElement => {
+const DeviceManagementAccountPage = () => {
 	const { t } = useTranslation();
 
 	return (

apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountRow.tsx

@@ -1,7 +1,6 @@
 import { Box, Button } from '@rocket.chat/fuselage';
 import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
 import { GenericTableCell, GenericTableRow } from '@rocket.chat/ui-client';
-import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import DeviceIcon from '../../../../components/deviceManagement/DeviceIcon';
@@ -16,7 +15,7 @@ type DevicesRowProps = {
 	loginAt: string;
 };
 
-const DeviceManagementAccountRow = ({ _id, deviceName, deviceType = 'browser', deviceOSName, loginAt }: DevicesRowProps): ReactElement => {
+const DeviceManagementAccountRow = ({ _id, deviceName, deviceType = 'browser', deviceOSName, loginAt }: DevicesRowProps) => {
 	const { t } = useTranslation();
 	const formatDateAndTime = useFormatDateAndTime();
 	const mediaQuery = useMediaQuery('(min-width: 1024px)');

apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountTable.tsx

@@ -2,7 +2,6 @@ import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
 import { GenericTableHeaderCell, usePagination, useSort } from '@rocket.chat/ui-client';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
-import type { ReactElement } from 'react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -16,7 +15,7 @@ const sortMapping = {
 	loginAt: 'loginAt',
 };
 
-const DeviceManagementAccountTable = (): ReactElement => {
+const DeviceManagementAccountTable = () => {
 	const { t } = useTranslation();
 	const { current, itemsPerPage, setCurrent, setItemsPerPage, ...paginationProps } = usePagination();
 	const { sortBy, sortDirection, setSort } = useSort<'client' | 'os' | 'loginAt'>('loginAt');
@@ -59,7 +58,7 @@ const DeviceManagementAccountTable = (): ReactElement => {
 		<DeviceManagementTable
 			{...queryResult}
 			headers={headers}
-			renderRow={(session): ReactElement => (
+			renderRow={(session) => (
 				<DeviceManagementAccountRow
 					key={session._id}
 					_id={session._id}

apps/meteor/client/views/account/integrations/AccountIntegrationsRoute.tsx

@@ -1,10 +1,9 @@
 import { useSetting } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 
 import AccountIntegrationsPage from './AccountIntegrationsPage';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 
-const AccountIntegrationsRoute = (): ReactElement => {
+const AccountIntegrationsRoute = () => {
 	const webdavEnabled = useSetting('Webdav_Integration_Enabled', false);
 
 	if (!webdavEnabled) {

apps/meteor/client/views/account/omnichannel/OmnichannelPreferencesPage.tsx

@@ -1,7 +1,6 @@
 import { ButtonGroup, Button, Box, Accordion } from '@rocket.chat/fuselage';
 import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch, useTranslation, useEndpoint, useUserPreference, useSetting } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 
 import PreferencesConversationTranscript from './PreferencesConversationTranscript';
@@ -12,7 +11,7 @@ type FormData = {
 	omnichannelTranscriptEmail: boolean;
 };
 
-const OmnichannelPreferencesPage = (): ReactElement => {
+const OmnichannelPreferencesPage = () => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 

apps/meteor/client/views/account/omnichannel/PreferencesGeneral.tsx

@@ -1,9 +1,8 @@
 import { Field, FieldGroup, FieldHint, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage-forms';
-import type { ReactElement } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
-export const PreferencesGeneral = (): ReactElement => {
+export const PreferencesGeneral = () => {
 	const { t } = useTranslation();
 	const { control } = useFormContext();
 

apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx

@@ -3,7 +3,6 @@ import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '@
 import { useToastMessageDispatch, useSetting, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
 import { useId } from 'react';
-import type { ReactElement } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import PreferencesGlobalSection from './PreferencesGlobalSection';
@@ -18,7 +17,7 @@ import type { AccountPreferencesData } from './useAccountPreferencesValues';
 import { useAccountPreferencesValues } from './useAccountPreferencesValues';
 import { getDirtyFields } from '../../../lib/getDirtyFields';
 
-const AccountPreferencesPage = (): ReactElement => {
+const AccountPreferencesPage = () => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const dataDownloadEnabled = useSetting('UserData_EnableDownload');

apps/meteor/client/views/account/profile/AccountProfileForm.tsx

@@ -14,7 +14,7 @@ import {
 	useLayout,
 } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
-import type { AllHTMLAttributes, ReactElement } from 'react';
+import type { AllHTMLAttributes } from 'react';
 import { useCallback } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
@@ -26,7 +26,7 @@ import UserAvatarEditor from '../../../components/avatar/UserAvatarEditor';
 import { useUpdateAvatar } from '../../../hooks/useUpdateAvatar';
 import { USER_STATUS_TEXT_MAX_LENGTH, BIO_TEXT_MAX_LENGTH } from '../../../lib/constants';
 
-const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactElement => {
+const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>) => {
 	const t = useTranslation();
 	const user = useUser();
 	const dispatchToastMessage = useToastMessageDispatch();

apps/meteor/client/views/account/profile/AccountProfilePage.tsx

@@ -12,7 +12,6 @@ import {
 	useSetting,
 	useLayout,
 } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 import { useId, useState, useCallback } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
@@ -23,7 +22,7 @@ import ConfirmOwnerChangeModal from '../../../components/ConfirmOwnerChangeModal
 import { useAllowPasswordChange } from '../security/useAllowPasswordChange';
 
 // TODO: enforce useMutation
-const AccountProfilePage = (): ReactElement => {
+const AccountProfilePage = () => {
 	const t = useTranslation();
 	const user = useUser();
 	const dispatchToastMessage = useToastMessageDispatch();

apps/meteor/client/views/account/profile/AccountProfileRoute.tsx

@@ -1,10 +1,9 @@
 import { useSetting } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 
 import AccountProfilePage from './AccountProfilePage';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 
-const AccountProfileRoute = (): ReactElement => {
+const AccountProfileRoute = () => {
 	const canViewProfile = useSetting('Accounts_AllowUserProfileChange');
 
 	if (!canViewProfile) {

apps/meteor/client/views/account/security/AccountSecurityPage.tsx

@@ -2,7 +2,6 @@ import { Box, Accordion, AccordionItem, ButtonGroup, Button, Callout } from '@ro
 import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '@rocket.chat/ui-client';
 import { useSetting, useTranslation, useUser } from '@rocket.chat/ui-contexts';
 import { useId } from 'react';
-import type { ReactElement } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import ChangePassword from './ChangePassword';
@@ -13,7 +12,7 @@ import { useRequire2faSetup } from '../../hooks/useRequire2faSetup';
 
 const passwordDefaultValues = { password: '', confirmationPassword: '' };
 
-const AccountSecurityPage = (): ReactElement => {
+const AccountSecurityPage = () => {
 	const t = useTranslation();
 	const user = useUser();
 

apps/meteor/client/views/account/security/AccountSecurityRoute.tsx

@@ -1,10 +1,9 @@
 import { useSetting } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 
 import AccountSecurityPage from './AccountSecurityPage';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 
-const AccountSecurityRoute = (): ReactElement => {
+const AccountSecurityRoute = () => {
 	const isTwoFactorEnabled = useSetting('Accounts_TwoFactorAuthentication_Enabled');
 	const isE2EEnabled = useSetting('E2E_Enable');
 	const allowPasswordChange = useSetting('Accounts_AllowPasswordChange');

apps/meteor/client/views/account/security/ChangePassphrase.tsx

@@ -42,7 +42,7 @@ const defaultValues = {
 	confirmationPassphrase: '',
 };
 
-export const ChangePassphrase = (): JSX.Element => {
+export const ChangePassphrase = () => {
 	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 

apps/meteor/client/views/account/security/EndToEnd.tsx

@@ -3,7 +3,7 @@ import { Box, Divider } from '@rocket.chat/fuselage';
 import { ChangePassphrase } from './ChangePassphrase';
 import { ResetPassphrase } from './ResetPassphrase';
 
-const EndToEnd = (): JSX.Element => {
+const EndToEnd = () => {
 	return (
 		<Box display='flex' flexDirection='column' alignItems='flex-start'>
 			<ChangePassphrase />

apps/meteor/client/views/account/security/ResetPassphrase.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useResetE2EPasswordMutation } from '../../hooks/useResetE2EPasswordMutation';
 
-export const ResetPassphrase = (): JSX.Element => {
+export const ResetPassphrase = () => {
 	const { t } = useTranslation();
 	const resetE2EPassword = useResetE2EPasswordMutation();
 	return (

apps/meteor/client/views/account/security/TwoFactorTOTP.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, TextInput, Margins, Field, FieldRow, FieldLabel, ToggleSwitch } from '@rocket.chat/fuselage';
 import { useEffectEvent, useSafely } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useUser, useMethod } from '@rocket.chat/ui-contexts';
-import type { ReactElement, ComponentPropsWithoutRef, FormEvent } from 'react';
+import type { ComponentPropsWithoutRef, FormEvent } from 'react';
 import { useState, useCallback, useEffect, useId } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -17,7 +17,7 @@ type TwoFactorTOTPFormData = {
 
 type TwoFactorTOTPProps = ComponentPropsWithoutRef<typeof Box>;
 
-const TwoFactorTOTP = (props: TwoFactorTOTPProps): ReactElement => {
+const TwoFactorTOTP = (props: TwoFactorTOTPProps) => {
 	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const user = useUser();

apps/meteor/client/views/account/tokens/AccountTokensPage.tsx

@@ -1,10 +1,9 @@
 import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
-import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import AccountTokensTable from './AccountTokensTable';
 
-const AccountTokensPage = (): ReactElement => {
+const AccountTokensPage = () => {
 	const { t } = useTranslation();
 
 	return (

apps/meteor/client/views/account/tokens/AccountTokensRoute.tsx

@@ -1,10 +1,9 @@
 import { usePermission } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 
 import AccountTokensPage from './AccountTokensPage';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 
-const AccountTokensRoute = (): ReactElement => {
+const AccountTokensRoute = () => {
 	const canCreateTokens = usePermission('create-personal-access-tokens');
 
 	if (!canCreateTokens) {

apps/meteor/client/views/account/tokens/AccountTokensTable/AccountTokensTable.tsx

@@ -10,7 +10,6 @@ import {
 } from '@rocket.chat/ui-client';
 import { useSetModal, useToastMessageDispatch, useUserId, useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import type { ReactElement, RefObject } from 'react';
 import { useMemo, useCallback } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -20,7 +19,7 @@ import GenericNoResults from '../../../../components/GenericNoResults';
 import { useResizeInlineBreakpoint } from '../../../../hooks/useResizeInlineBreakpoint';
 import { miscQueryKeys } from '../../../../lib/queryKeys';
 
-const AccountTokensTable = (): ReactElement => {
+const AccountTokensTable = () => {
 	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const setModal = useSetModal();
@@ -37,7 +36,7 @@ const AccountTokensTable = (): ReactElement => {
 
 	const queryClient = useQueryClient();
 
-	const [ref, isMedium] = useResizeInlineBreakpoint([600], 200) as [RefObject<HTMLElement>, boolean];
+	const [ref, isMedium] = useResizeInlineBreakpoint<HTMLElement>([600], 200);
 
 	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
 

apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx

@@ -3,7 +3,6 @@ import { isSettingColor, isSetting } from '@rocket.chat/core-typings';
 import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks';
 import { useSettingsDispatch, useSettingStructure } from '@rocket.chat/ui-contexts';
 import DOMPurify from 'dompurify';
-import type { ReactElement } from 'react';
 import { useEffect, useMemo, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -18,7 +17,7 @@ type SettingFieldProps = {
 	sectionChanged?: boolean;
 };
 
-function SettingField({ className = undefined, settingId, sectionChanged }: SettingFieldProps): ReactElement {
+function SettingField({ className = undefined, settingId, sectionChanged }: SettingFieldProps) {
 	const setting = useEditableSetting(settingId);
 	const persistedSetting = useSettingStructure(settingId);
 	const hasSettingModule = useHasSettingModule(setting);

apps/meteor/client/views/admin/ABAC/AdminABACRoute.tsx

@@ -1,5 +1,4 @@
 import { usePermission, useSetModal, useCurrentModal, useRouter, useRouteParameter, useSettingStructure } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 import { memo, useEffect, useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -15,7 +14,7 @@ import SettingsProvider from '../../../providers/SettingsProvider';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 import EditableSettingsProvider from '../settings/EditableSettingsProvider';
 
-const AdminABACRoute = (): ReactElement => {
+const AdminABACRoute = () => {
 	const { t } = useTranslation();
 	const canViewABACPage = usePermission('abac-management');
 	const { data: hasABAC = false } = useHasLicenseModule('abac');

apps/meteor/client/views/admin/AdministrationRouter.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from '@rocket.chat/ui-contexts';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { Suspense, useEffect } from 'react';
 
 import AdministrationLayout from './AdministrationLayout';
@@ -25,7 +25,7 @@ type AdministrationRouterProps = {
 	children?: ReactNode;
 };
 
-const AdministrationRouter = ({ children }: AdministrationRouterProps): ReactElement => {
+const AdministrationRouter = ({ children }: AdministrationRouterProps) => {
 	const router = useRouter();
 
 	useEffect(

apps/meteor/client/views/admin/customEmoji/AddCustomEmoji.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, ButtonGroup, Margins, TextInput, Field, FieldLabel, FieldRow, FieldError, IconButton } from '@rocket.chat/fuselage';
 import { ContextualbarScrollableContent, ContextualbarFooter } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
-import type { ReactElement, ChangeEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -13,7 +13,7 @@ type AddCustomEmojiProps = {
 	onChange: () => void;
 };
 
-const AddCustomEmoji = ({ close, onChange, ...props }: AddCustomEmojiProps): ReactElement => {
+const AddCustomEmoji = ({ close, onChange, ...props }: AddCustomEmojiProps) => {
 	const { t } = useTranslation();
 	const [name, setName] = useState('');
 	const [aliases, setAliases] = useState('');

apps/meteor/client/views/admin/customEmoji/CustomEmojiRoute.tsx

@@ -9,7 +9,6 @@ import {
 	PageContent,
 } from '@rocket.chat/ui-client';
 import { useRoute, useRouteParameter, usePermission } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 import { useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -18,7 +17,7 @@ import CustomEmoji from './CustomEmoji';
 import EditCustomEmojiWithData from './EditCustomEmojiWithData';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 
-const CustomEmojiRoute = (): ReactElement => {
+const CustomEmojiRoute = () => {
 	const { t } = useTranslation();
 	const route = useRoute('emoji-custom');
 	const context = useRouteParameter('context');