chore: Upgrade React (#32288)

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

@@ -1,5 +1,6 @@
 import type { Keys as IconName } from '@rocket.chat/icons';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { flushSync } from 'react-dom';
 
 import AddLinkComposerActionModal from './AddLinkComposerActionModal';
 import type { ComposerAPI } from '../../../../client/lib/chats/ChatAPI';
@@ -72,9 +73,14 @@ export const formattingButtons: ReadonlyArray<FormattingButton> = [
 			};
 
 			const onConfirm = (url: string, text: string) => {
-				onClose();
-				composerApi.replaceText(`[${text}](${url})`, selection);
-				composerApi.setCursorToEnd();
+				// Composer API can't handle the selection of the text while the modal is open
+				flushSync(() => {
+					onClose();
+				});
+				flushSync(() => {
+					composerApi.replaceText(`[${text}](${url})`, selection);
+					composerApi.setCursorToEnd();
+				});
 			};
 
 			imperativeModal.open({ component: AddLinkComposerActionModal, props: { onConfirm, selectedText, onClose } });

apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useAuditMenu.spec.tsx

@@ -5,7 +5,6 @@ import { useAuditMenu } from './useAuditMenu';
 
 it('should return an empty array of items if doesn`t have license', async () => {
 	const { result } = renderHook(() => useAuditMenu(), {
-		legacyRoot: true,
 		wrapper: mockAppRoot()
 			.withEndpoint('GET', '/v1/licenses.info', () => ({
 				// @ts-expect-error: just for testing
@@ -24,7 +23,6 @@ it('should return an empty array of items if doesn`t have license', async () =>
 
 it('should return an empty array of items if have license and not have permissions', async () => {
 	const { result } = renderHook(() => useAuditMenu(), {
-		legacyRoot: true,
 		wrapper: mockAppRoot()
 			.withEndpoint('GET', '/v1/licenses.info', () => ({
 				license: {
@@ -46,7 +44,6 @@ it('should return an empty array of items if have license and not have permissio
 
 it('should return auditItems if have license and permissions', async () => {
 	const { result } = renderHook(() => useAuditMenu(), {
-		legacyRoot: true,
 		wrapper: mockAppRoot()
 			.withEndpoint('GET', '/v1/licenses.info', () => ({
 				license: {
@@ -81,7 +78,6 @@ it('should return auditItems if have license and permissions', async () => {
 
 it('should return auditMessages item if have license and can-audit permission', async () => {
 	const { result } = renderHook(() => useAuditMenu(), {
-		legacyRoot: true,
 		wrapper: mockAppRoot()
 			.withEndpoint('GET', '/v1/licenses.info', () => ({
 				license: {
@@ -109,7 +105,6 @@ it('should return auditMessages item if have license and can-audit permission',
 
 it('should return audiLogs item if have license and can-audit-log permission', async () => {
 	const { result } = renderHook(() => useAuditMenu(), {
-		legacyRoot: true,
 		wrapper: mockAppRoot()
 			.withEndpoint('GET', '/v1/licenses.info', () => ({
 				license: {

apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useMarketPlaceMenu.spec.tsx

@@ -6,7 +6,6 @@ import { useMarketPlaceMenu } from './useMarketPlaceMenu';
 
 it('should return and empty array if the user does not have `manage-apps` and `access-marketplace` permission', () => {
 	const { result } = renderHook(() => useMarketPlaceMenu(), {
-		legacyRoot: true,
 		wrapper: mockAppRoot()
 			.withEndpoint('GET', '/apps/actionButtons', () => [])
 			.build(),
@@ -17,7 +16,6 @@ it('should return and empty array if the user does not have `manage-apps` and `a
 
 it('should return `explore` and `installed` items if the user has `access-marketplace` permission', () => {
 	const { result } = renderHook(() => useMarketPlaceMenu(), {
-		legacyRoot: true,
 		wrapper: mockAppRoot()
 			.withEndpoint('GET', '/apps/actionButtons', () => [])
 			.withPermission('access-marketplace')
@@ -39,7 +37,6 @@ it('should return `explore` and `installed` items if the user has `access-market
 
 it('should return `explore`, `installed` and `requested` items if the user has `manage-apps` permission', () => {
 	const { result } = renderHook(() => useMarketPlaceMenu(), {
-		legacyRoot: true,
 		wrapper: mockAppRoot()
 			.withEndpoint('GET', '/apps/actionButtons', () => [])
 			.withEndpoint('GET', '/apps/app-request/stats', () => ({
@@ -73,7 +70,6 @@ it('should return `explore`, `installed` and `requested` items if the user has `
 
 it('should return one action from the server with no conditions', async () => {
 	const { result } = renderHook(() => useMarketPlaceMenu(), {
-		legacyRoot: true,
 		wrapper: mockAppRoot()
 			.withEndpoint('GET', '/apps/actionButtons', () => [
 				{
@@ -117,7 +113,6 @@ it('should return one action from the server with no conditions', async () => {
 describe('Marketplace menu with role conditions', () => {
 	it('should return the action if the user has admin role', async () => {
 		const { result } = renderHook(() => useMarketPlaceMenu(), {
-			legacyRoot: true,
 			wrapper: mockAppRoot()
 				.withEndpoint('GET', '/apps/actionButtons', () => [
 					{
@@ -165,7 +160,6 @@ describe('Marketplace menu with role conditions', () => {
 
 	it('should return filter the action if the user doesn`t have admin role', async () => {
 		const { result } = renderHook(() => useMarketPlaceMenu(), {
-			legacyRoot: true,
 			wrapper: mockAppRoot()
 				.withEndpoint('GET', '/apps/actionButtons', () => [
 					{
@@ -213,7 +207,6 @@ describe('Marketplace menu with role conditions', () => {
 describe('Marketplace menu with permission conditions', () => {
 	it('should return the action if the user has manage-apps permission', async () => {
 		const { result } = renderHook(() => useMarketPlaceMenu(), {
-			legacyRoot: true,
 			wrapper: mockAppRoot()
 				.withEndpoint('GET', '/apps/actionButtons', () => [
 					{
@@ -259,7 +252,6 @@ describe('Marketplace menu with permission conditions', () => {
 
 	it('should return filter the action if the user doesn`t have `any` permission', async () => {
 		const { result } = renderHook(() => useMarketPlaceMenu(), {
-			legacyRoot: true,
 			wrapper: mockAppRoot()
 				.withEndpoint('GET', '/apps/actionButtons', () => [
 					{

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAdministrationMenu.spec.tsx

@@ -5,7 +5,6 @@ import { useAdministrationMenu } from './useAdministrationMenu';
 
 it('should return omnichannel item if has `view-livechat-manager` permission ', async () => {
 	const { result } = renderHook(() => useAdministrationMenu(), {
-		legacyRoot: true,
 		wrapper: mockAppRoot()
 			.withEndpoint('GET', '/v1/licenses.info', () => ({
 				// @ts-expect-error this is a mock
@@ -31,7 +30,6 @@ it('should return omnichannel item if has `view-livechat-manager` permission ',
 
 it('should show administration item if has at least one admin permission', async () => {
 	const { result } = renderHook(() => useAdministrationMenu(), {
-		legacyRoot: true,
 		wrapper: mockAppRoot()
 			.withEndpoint('GET', '/v1/licenses.info', () => ({
 				// @ts-expect-error this is a mock

apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx

@@ -1,13 +1,13 @@
 import { Palette } from '@rocket.chat/fuselage';
 import type { ScrollValues } from 'rc-scrollbars';
 import { Scrollbars } from 'rc-scrollbars';
-import type { MutableRefObject, CSSProperties, ReactNode } from 'react';
+import type { MutableRefObject, CSSProperties, ReactNode, HTMLAttributes } from 'react';
 import { memo, forwardRef, useCallback, useMemo } from 'react';
 
 export type CustomScrollbarsProps = {
 	overflowX?: boolean;
 	style?: CSSProperties;
-	children?: ReactNode;
+	children?: HTMLAttributes<HTMLElement>['children'];
 	onScroll?: (values: ScrollValues) => void;
 	renderView?: typeof Scrollbars.defaultProps.renderView;
 	renderTrackHorizontal?: typeof Scrollbars.defaultProps.renderTrackHorizontal;
@@ -26,7 +26,7 @@ const CustomScrollbars = forwardRef<HTMLElement, CustomScrollbarsProps>(function
 	const scrollbarsStyle = useMemo(() => ({ ...style, ...styleDefault }), [style]);
 
 	const refSetter = useCallback(
-		(scrollbarRef: Scrollbars) => {
+		(scrollbarRef: Scrollbars | null) => {
 			if (ref && scrollbarRef) {
 				if (typeof ref === 'function') {
 					ref(scrollbarRef.view ?? null);
@@ -52,7 +52,7 @@ const CustomScrollbars = forwardRef<HTMLElement, CustomScrollbarsProps>(function
 			renderThumbVertical={({ style, ...props }) => (
 				<div {...props} style={{ ...style, backgroundColor: Palette.stroke['stroke-dark'].toString(), borderRadius: '4px' }} />
 			)}
-			children={children}
+			children={children as ReactNode} // workaround for incompatible types between react-virtuoso and react-i18next
 			ref={refSetter}
 		/>
 	);

apps/meteor/client/components/CustomScrollbars/VirtuosoScrollbars.tsx

@@ -1,13 +1,13 @@
-import type { ComponentProps, Ref } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 import { forwardRef } from 'react';
 
 import CustomScrollbars from './CustomScrollbars';
 
-type VirtuosoScrollbarsProps = ComponentProps<typeof CustomScrollbars>;
+type VirtuosoScrollbarsProps = ComponentPropsWithoutRef<typeof CustomScrollbars>;
 
-const VirtuosoScrollbars = forwardRef(function VirtuosoScrollbars(
-	{ style, children, ...props }: VirtuosoScrollbarsProps,
-	ref: Ref<HTMLDivElement>,
+const VirtuosoScrollbars = forwardRef<HTMLDivElement, VirtuosoScrollbarsProps>(function VirtuosoScrollbars(
+	{ style, children, ...props },
+	ref,
 ) {
 	return (
 		<CustomScrollbars style={style} ref={ref} renderView={(viewProps) => <div {...viewProps} {...props} tabIndex={-1} />}>

apps/meteor/client/components/GenericModal/GenericModal.spec.tsx

@@ -11,7 +11,6 @@ const renderModal = (modalElement: ReactElement) => {
 	const {
 		result: { current: setModal },
 	} = renderHook(() => useSetModal(), {
-		legacyRoot: true,
 		wrapper: ({ children }) => (
 			<Suspense fallback={null}>
 				<ModalProviderWithRegion>{children}</ModalProviderWithRegion>

apps/meteor/client/components/InfoPanel/InfoPanel.stories.tsx

@@ -20,12 +20,12 @@ export default {
 	component: InfoPanel,
 	subcomponents: {
 		InfoPanelAction: InfoPanelAction as ComponentType<any>,
-		InfoPanelActionGroup,
-		InfoPanelAvatar,
-		InfoPanelField,
-		InfoPanelLabel,
-		InfoPanelSection,
-		InfoPanelText,
+		InfoPanelActionGroup: InfoPanelActionGroup as ComponentType<any>,
+		InfoPanelAvatar: InfoPanelAvatar as ComponentType<any>,
+		InfoPanelField: InfoPanelField as ComponentType<any>,
+		InfoPanelLabel: InfoPanelLabel as ComponentType<any>,
+		InfoPanelSection: InfoPanelSection as ComponentType<any>,
+		InfoPanelText: InfoPanelText as ComponentType<any>,
 		InfoPanelTitle: InfoPanelTitle as ComponentType<any>,
 		RetentionPolicyCallout: RetentionPolicyCallout as ComponentType<any>,
 	},

apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.spec.tsx

@@ -14,7 +14,6 @@ describe('RetentionPolicyCallout', () => {
 	it('Should render callout if settings are valid', () => {
 		const fakeRoom = createFakeRoom({ t: 'c' });
 		render(<RetentionPolicyCallout room={fakeRoom} />, {
-			legacyRoot: true,
 			wrapper: createMock({ appliesToChannels: true, TTLChannels: 60000 }),
 		});
 		expect(screen.getByRole('alert')).toHaveTextContent('a minute June 1, 2024 at 12:30 AM');
@@ -23,7 +22,6 @@ describe('RetentionPolicyCallout', () => {
 	it('Should not render callout if settings are invalid', () => {
 		const fakeRoom = createFakeRoom({ t: 'c' });
 		render(<RetentionPolicyCallout room={fakeRoom} />, {
-			legacyRoot: true,
 			wrapper: createMock({ appliesToChannels: true, TTLChannels: 60000, advancedPrecisionCron: '* * * 12 *', advancedPrecision: true }),
 		});
 		expect(screen.queryByRole('alert')).not.toBeInTheDocument();

apps/meteor/client/components/MarkdownText.spec.tsx

@@ -43,7 +43,6 @@ const markdownText = `
 it('should render html elements as expected using default parser', async () => {
 	const { container } = render(<MarkdownText content={markdownText} variant='document' />, {
 		wrapper: mockAppRoot().build(),
-		legacyRoot: true,
 	});
 
 	const normalizedHtml = normalizeHtml(container.innerHTML);
@@ -73,7 +72,6 @@ it('should render html elements as expected using default parser', async () => {
 it('should render html elements as expected using inline parser', async () => {
 	const { container } = render(<MarkdownText content={markdownText} variant='inline' />, {
 		wrapper: mockAppRoot().build(),
-		legacyRoot: true,
 	});
 
 	const normalizedHtml = normalizeHtml(container.innerHTML);

apps/meteor/client/components/Omnichannel/hooks/useDepartmentsList.spec.ts

@@ -39,7 +39,6 @@ it('should not fetch and add selected department if it is already in the departm
 				selectedDepartment: '5',
 			}),
 		{
-			legacyRoot: true,
 			wrapper: mockAppRoot()
 				.withEndpoint('GET', '/v1/livechat/department', () => ({
 					count: 25,
@@ -90,7 +89,6 @@ it('should fetch and add selected department if it is not part of departments li
 				selectedDepartment: '56f5be8bcf8cd67f9e9bcfdc',
 			}),
 		{
-			legacyRoot: true,
 			wrapper: mockAppRoot()
 				.withEndpoint('GET', '/v1/livechat/department', () => ({
 					count: 25,

apps/meteor/client/components/Omnichannel/modals/CloseChatModal.tsx

@@ -80,7 +80,7 @@ const CloseChatModal = ({ department, visitorEmail, onCancel, onConfirm }: Close
 	};
 
 	const onSubmit = useCallback(
-		({ comment, tags, transcriptPDF, transcriptEmail, subject }: CloseChatModalFormData): void => {
+		({ comment, tags, transcriptPDF, transcriptEmail, subject }: CloseChatModalFormData) => {
 			const preferences = {
 				omnichannelTranscriptPDF: !!transcriptPDF,
 				omnichannelTranscriptEmail: alwaysSendTranscript ? true : !!transcriptEmail,

apps/meteor/client/components/Omnichannel/modals/TranscriptModal.spec.tsx

@@ -24,7 +24,7 @@ const defaultProps = {
 
 it('should show Undo request button when roomOpen is true and transcriptRequest exist', async () => {
 	const onDiscardMock = jest.fn();
-	render(<TranscriptModal {...defaultProps} onDiscard={onDiscardMock} />, { legacyRoot: true });
+	render(<TranscriptModal {...defaultProps} onDiscard={onDiscardMock} />);
 
 	const undoRequestButton = await screen.findByText('Undo_request');
 	await userEvent.click(undoRequestButton);
@@ -33,14 +33,14 @@ it('should show Undo request button when roomOpen is true and transcriptRequest
 });
 
 it('should show Request button when roomOpen is true and transcriptRequest not exist', async () => {
-	render(<TranscriptModal {...{ ...defaultProps, room: { ...room, transcriptRequest: undefined } }} />, { legacyRoot: true });
+	render(<TranscriptModal {...{ ...defaultProps, room: { ...room, transcriptRequest: undefined } }} />);
 
 	const requestBtn = await screen.findByRole('button', { name: 'request-button' });
 	expect(requestBtn).toBeInTheDocument();
 });
 
 it('should show Send button when roomOpen is false', async () => {
-	render(<TranscriptModal {...{ ...defaultProps, room: { ...room, open: false } }} />, { legacyRoot: true });
+	render(<TranscriptModal {...{ ...defaultProps, room: { ...room, open: false } }} />);
 
 	const sendBtn = await screen.findByRole('button', { name: 'send-button' });
 	expect(sendBtn).toBeInTheDocument();

apps/meteor/client/components/Page/Page.stories.tsx

@@ -8,10 +8,10 @@ export default {
 	title: 'Components/Page',
 	component: Page,
 	subcomponents: {
-		PageContent,
+		PageContent: PageContent as ComponentType<any>,
 		PageHeader: PageHeader as ComponentType<any>,
-		PageScrollableContent,
-		PageScrollableContentWithShadow,
+		PageScrollableContent: PageScrollableContent as ComponentType<any>,
+		PageScrollableContentWithShadow: PageScrollableContentWithShadow as ComponentType<any>,
 	},
 	parameters: {
 		layout: 'fullscreen',

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

@@ -15,7 +15,7 @@ const SidebarTogglerBadge = ({ children }: SidebarTogglerBadgeProps) => (
 			right: 3px;
 		`}
 	>
-		<Badge variant='danger' children={children} />
+		<Badge variant='danger'>{children}</Badge>
 	</Box>
 );
 

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleFederated.tsx

@@ -1,3 +1,4 @@
+import type { OptionType } from '@rocket.chat/fuselage';
 import { MultiSelectFiltered, Icon, Box, Chip } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
@@ -93,7 +94,7 @@ const UserAutoCompleteMultipleFederated = ({
 	);
 
 	return (
-		<OptionsContext.Provider value={{ options }}>
+		<OptionsContext.Provider value={{ options: options as unknown as OptionType[] }}>
 			<MultiSelectFiltered
 				{...props}
 				data-qa-type='user-auto-complete-input'

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOptions.tsx

@@ -1,3 +1,4 @@
+import type { OptionType } from '@rocket.chat/fuselage';
 import { Options } from '@rocket.chat/fuselage';
 import type { ComponentProps, ReactElement, Ref } from 'react';
 import { forwardRef, createContext, useContext } from 'react';
@@ -9,7 +10,7 @@ import UserAutoCompleteMultipleOption from './UserAutoCompleteMultipleOption';
 // but we also need to pass internal state to this renderer, as well as the props that also come from the Select.
 
 type OptionsContextValue = {
-	options: ComponentProps<typeof Options>['options'];
+	options: OptionType[];
 };
 
 export const OptionsContext = createContext<OptionsContextValue>({

apps/meteor/client/components/UserStatusMenu.tsx

@@ -75,7 +75,9 @@ const UserStatusMenu = ({
 		[hide, reset],
 	);
 
-	useEffect(() => onChange(status), [status, onChange]);
+	useEffect(() => {
+		onChange(status);
+	}, [status, onChange]);
 
 	return (
 		<>

apps/meteor/client/components/WarningModal.spec.tsx

@@ -5,7 +5,6 @@ import WarningModal from './WarningModal';
 
 it('should look good', async () => {
 	render(<WarningModal text='text' confirmText='confirm' cancelText='cancel' confirm={() => undefined} close={() => undefined} />, {
-		legacyRoot: true,
 		wrapper: mockAppRoot().build(),
 	});