[pull] develop from RocketChat:develop

apps/meteor/app/ui-message/client/messageBox/createComposerAPI.ts

@@ -15,7 +15,7 @@ export const createComposerAPI = (
 	persistDraft: (value: string) => void,
 	initialDraft: string,
 	quoteChainLimit: number,
-	composerRef: RefObject<HTMLElement>,
+	composerRef: RefObject<HTMLElement | null>,
 	{ rid, tmid }: { rid: string; tmid?: string },
 ): ComposerAPI => {
 	const triggerEvent = (input: HTMLTextAreaElement, evt: string): void => {

apps/meteor/client/apps/gameCenter/GameCenter.tsx

@@ -2,7 +2,7 @@ import type { IExternalComponent } from '@rocket.chat/apps-engine/definition/ext
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useRoomToolbox } from '@rocket.chat/ui-contexts';
 import { useState } from 'react';
-import type { MouseEvent, ReactElement } from 'react';
+import type { MouseEvent } from 'react';
 
 import GameCenterContainer from './GameCenterContainer';
 import GameCenterList from './GameCenterList';
@@ -11,7 +11,7 @@ import { preventSyntheticEvent } from '../../lib/utils/preventSyntheticEvent';
 
 export type IGame = IExternalComponent;
 
-const GameCenter = (): ReactElement => {
+const GameCenter = () => {
 	const [openedGame, setOpenedGame] = useState<IGame>();
 
 	const { closeTab } = useRoomToolbox();

apps/meteor/client/apps/gameCenter/GameCenterContainer.tsx

@@ -7,7 +7,6 @@ import {
 	ContextualbarClose,
 	ContextualbarDialog,
 } from '@rocket.chat/ui-client';
-import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import type { IGame } from './GameCenter';
@@ -18,7 +17,7 @@ interface IGameCenterContainerProps {
 	game: IGame;
 }
 
-const GameCenterContainer = ({ handleClose, handleBack, game }: IGameCenterContainerProps): ReactElement => {
+const GameCenterContainer = ({ handleClose, handleBack, game }: IGameCenterContainerProps) => {
 	const { t } = useTranslation();
 
 	return (

apps/meteor/client/apps/gameCenter/GameCenterInvitePlayersModal.tsx

@@ -2,7 +2,6 @@ import type { IUser } from '@rocket.chat/core-typings';
 import { Box } from '@rocket.chat/fuselage';
 import { Random } from '@rocket.chat/random';
 import { GenericModal } from '@rocket.chat/ui-client';
-import type { ReactElement } from 'react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -20,7 +19,7 @@ interface IGameCenterInvitePlayersModalProps {
 	onClose: () => void;
 }
 
-const GameCenterInvitePlayersModal = ({ game, onClose }: IGameCenterInvitePlayersModalProps): ReactElement => {
+const GameCenterInvitePlayersModal = ({ game, onClose }: IGameCenterInvitePlayersModalProps) => {
 	const { t } = useTranslation();
 	const [users, setUsers] = useState<Array<Username>>([]);
 	const { name } = game;

apps/meteor/client/apps/gameCenter/GameCenterList.tsx

@@ -8,7 +8,6 @@ import {
 	ContextualbarSkeleton,
 } from '@rocket.chat/ui-client';
 import { useSetModal } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -22,7 +21,7 @@ interface IGameCenterListProps {
 	isLoading: boolean;
 }
 
-const GameCenterList = ({ handleClose, handleOpenGame, games, isLoading }: IGameCenterListProps): ReactElement => {
+const GameCenterList = ({ handleClose, handleOpenGame, games, isLoading }: IGameCenterListProps) => {
 	const { t } = useTranslation();
 	const setModal = useSetModal();
 

apps/meteor/client/lib/chats/ChatAPI.ts

@@ -68,7 +68,7 @@ export type ComposerAPI = {
 
 	readonly formatters: Subscribable<FormattingButton[]>;
 
-	readonly composerRef: RefObject<HTMLElement>;
+	readonly composerRef: RefObject<HTMLElement | null>;
 
 	readonly uploads: UploadsAPI;
 };

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/providers/ActionManagerProvider.tsx

@@ -1,5 +1,5 @@
 import { ActionManagerContext, useRouter } from '@rocket.chat/ui-contexts';
-import type { ReactNode, ReactElement } from 'react';
+import type { ReactNode } from 'react';
 
 import { ActionManager } from '../../app/ui-message/client/ActionManager';
 import { useAppActionButtons } from '../hooks/useAppActionButtons';
@@ -12,7 +12,7 @@ type ActionManagerProviderProps = {
 	children?: ReactNode;
 };
 
-const ActionManagerProvider = ({ children }: ActionManagerProviderProps): ReactElement => {
+const ActionManagerProvider = ({ children }: ActionManagerProviderProps) => {
 	const router = useRouter();
 	const actionManager = useInstance(() => [new ActionManager(router)], [router]);
 	useTranslationsForApps();

apps/meteor/client/providers/AuthenticationProvider/AuthenticationProvider.tsx

@@ -3,7 +3,7 @@ import { capitalize } from '@rocket.chat/string-helpers';
 import { AuthenticationContext, useSetting } from '@rocket.chat/ui-contexts';
 import { Accounts } from 'meteor/accounts-base';
 import { Meteor } from 'meteor/meteor';
-import type { ContextType, ReactElement, ReactNode } from 'react';
+import type { ContextType, ReactNode } from 'react';
 import { useMemo, useSyncExternalStore } from 'react';
 
 import { useLDAPAndCrowdCollisionWarning } from './hooks/useLDAPAndCrowdCollisionWarning';
@@ -57,7 +57,7 @@ const subscribeLoggingIn = (cb: () => void): (() => void) => {
 
 const getLoggingInSnapshot = (): boolean => Accounts.loggingIn();
 
-const AuthenticationProvider = ({ children }: AuthenticationProviderProps): ReactElement => {
+const AuthenticationProvider = ({ children }: AuthenticationProviderProps) => {
 	const isLdapEnabled = useSetting('LDAP_Enable', false);
 	const isCrowdEnabled = useSetting('CROWD_Enable', false);
 

apps/meteor/client/providers/DeviceProvider/DeviceProvider.tsx

@@ -2,7 +2,7 @@ import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { Device, DeviceContextValue } from '@rocket.chat/ui-contexts';
 import { DeviceContext } from '@rocket.chat/ui-contexts';
 import { useQuery, useQueryClient, keepPreviousData } from '@tanstack/react-query';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { useEffect, useState, useMemo } from 'react';
 
 import { isSetSinkIdAvailable } from './lib/isSetSinkIdAvailable';
@@ -28,7 +28,7 @@ const defaultDevices = {
 
 const devicesQueryKey = ['media-devices-list'];
 
-export const DeviceProvider = ({ children }: DeviceProviderProps): ReactElement => {
+export const DeviceProvider = ({ children }: DeviceProviderProps) => {
 	const [enabled] = useState(typeof isSecureContext && isSecureContext);
 	const [selectedAudioOutputDevice, setSelectedAudioOutputDevice] = useState<Device | undefined>(undefined);
 	const [selectedAudioInputDevice, setSelectedAudioInputDevice] = useState<Device | undefined>(undefined);

apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.tsx

@@ -1,5 +1,5 @@
 import { useDebouncedState, useEffectEvent, useLocalStorage } from '@rocket.chat/fuselage-hooks';
-import type { ReactNode, ReactElement, ContextType } from 'react';
+import type { ReactNode, ContextType } from 'react';
 import { useState, useCallback, useMemo, useSyncExternalStore } from 'react';
 
 import { useUpdateCustomEmoji } from './useUpdateCustomEmoji';
@@ -12,8 +12,8 @@ const DEFAULT_ITEMS_LIMIT = 90;
 // limit recent emojis to 27 (3 rows of 9)
 const RECENT_EMOJIS_LIMIT = 27;
 
-const EmojiPickerProvider = ({ children }: { children: ReactNode }): ReactElement => {
-	const [emojiPicker, setEmojiPicker] = useState<ReactElement | null>(null);
+const EmojiPickerProvider = ({ children }: { children: ReactNode }) => {
+	const [emojiPicker, setEmojiPicker] = useState<ReactNode>(null);
 	const [emojiToPreview, setEmojiToPreview] = useDebouncedState<{ emoji: string; name: string } | null>(null, 100);
 	const [recentEmojis, setRecentEmojis] = useLocalStorage<string[]>('emoji.recent', []);
 	const [frequentEmojis, setFrequentEmojis] = useLocalStorage<[string, number][]>('emoji.frequent', []);

apps/meteor/client/providers/TranslationProvider.tsx

@@ -15,7 +15,7 @@ import type { TranslationContextValue } from '@rocket.chat/ui-contexts';
 import { useSetting, TranslationContext } from '@rocket.chat/ui-contexts';
 import type i18next from 'i18next';
 import I18NextHttpBackend from 'i18next-http-backend';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { useEffect, useMemo } from 'react';
 import { I18nextProvider, initReactI18next, useTranslation } from 'react-i18next';
 
@@ -188,7 +188,7 @@ type TranslationProviderProps = {
 	children: ReactNode;
 };
 
-const TranslationProvider = ({ children }: TranslationProviderProps): ReactElement => {
+const TranslationProvider = ({ children }: TranslationProviderProps) => {
 	const language = useAutoLanguage();
 	const i18nextInstance = useI18next(language);
 	useCustomTranslations(i18nextInstance);
@@ -252,7 +252,7 @@ const TranslationProviderInner = ({
 		ogName: string;
 		key: string;
 	}[];
-}): ReactElement => {
+}) => {
 	const { t, i18n } = useTranslation();
 
 	const value: TranslationContextValue = useMemo(

apps/meteor/client/providers/UserProvider/UserProvider.tsx

@@ -7,7 +7,7 @@ import { UserContext, useRouteParameter, useSearchParameter } from '@rocket.chat
 import { useQueryClient } from '@tanstack/react-query';
 import { Meteor } from 'meteor/meteor';
 import type { Filter, ObjectId } from 'mongodb';
-import type { ContextType, ReactElement, ReactNode } from 'react';
+import type { ContextType, ReactNode } from 'react';
 import { useEffect, useMemo, useRef } from 'react';
 import type { StoreApi, UseBoundStore } from 'zustand';
 
@@ -61,7 +61,7 @@ const queryRoom = (
 	return [subscribe, getSnapshot];
 };
 
-const UserProvider = ({ children }: UserProviderProps): ReactElement => {
+const UserProvider = ({ children }: UserProviderProps) => {
 	const userId = userIdStore();
 
 	const user = Users.use((state) => {

apps/meteor/client/providers/UserProvider/hooks/useReloadAfterLogin.ts

@@ -6,7 +6,7 @@ import { LegacyRoomManager } from '../../../../app/ui-utils/client';
 import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
 
 export const useReloadAfterLogin = (user: IUser | null) => {
-	const usernameRef = useRef<string>();
+	const usernameRef = useRef<string>(undefined);
 	const router = useRouter();
 
 	useEffect(() => {

apps/meteor/client/providers/VideoConfProvider.tsx

@@ -1,15 +1,15 @@
 import { useToastMessageDispatch, useSetting } from '@rocket.chat/ui-contexts';
 import type { VideoConfPopupPayload, VideoConfContextValue } from '@rocket.chat/ui-video-conf';
 import { VideoConfContext } from '@rocket.chat/ui-video-conf';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { useState, useMemo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { VideoConfManager } from '../lib/VideoConfManager';
 import VideoConfPopups from '../views/room/contextualBar/VideoConference/VideoConfPopups';
 import { useVideoConfOpenCall } from '../views/room/contextualBar/VideoConference/hooks/useVideoConfOpenCall';
 
-const VideoConfContextProvider = ({ children }: { children: ReactNode }): ReactElement => {
+const VideoConfContextProvider = ({ children }: { children: ReactNode }) => {
 	const [outgoing, setOutgoing] = useState<VideoConfPopupPayload | undefined>();
 	const handleOpenCall = useVideoConfOpenCall();
 	const dispatchToastMessage = useToastMessageDispatch();

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 />;
 };