chore: Upgrade react-virtuoso (#31843)

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

@@ -1,15 +1,7 @@
 import type { ScrollValues } from 'rc-scrollbars';
 import { Scrollbars } from 'rc-scrollbars';
 import type { MutableRefObject, CSSProperties, ReactNode, ReactElement } from 'react';
-import React, { useMemo, memo, forwardRef } from 'react';
-
-const styleDefault: CSSProperties = {
-	width: '100%',
-	height: '100%',
-	flexGrow: 1,
-	willChange: 'transform',
-	overflowY: 'hidden',
-};
+import React, { memo, forwardRef, useCallback } from 'react';
 
 export type CustomScrollbarsProps = {
 	overflowX?: boolean;
@@ -21,19 +13,30 @@ export type CustomScrollbarsProps = {
 	autoHide?: boolean;
 };
 
-const ScrollableContentWrapper = forwardRef<HTMLElement, CustomScrollbarsProps>(function ScrollableContentWrapper(
-	{ children, style, onScroll, overflowX, renderView, ...props },
+const CustomScrollbars = forwardRef<HTMLElement, CustomScrollbarsProps>(function CustomScrollbars(
+	{ children, onScroll, overflowX, renderView, ...props },
 	ref,
 ) {
-	const scrollbarsStyle = useMemo((): CSSProperties => ({ ...style, ...styleDefault }), [style]);
+	const refSetter = useCallback(
+		(scrollbarRef) => {
+			if (ref && scrollbarRef) {
+				if (typeof ref === 'function') {
+					ref(scrollbarRef.view ?? null);
+					return;
+				}
+
+				(ref as MutableRefObject<HTMLElement | undefined>).current = scrollbarRef.view;
+			}
+		},
+		[ref],
+	);
 
 	return (
 		<Scrollbars
 			{...props}
 			autoHide
 			autoHideTimeout={2000}
 			autoHideDuration={500}
-			style={scrollbarsStyle}
 			onScrollFrame={onScroll}
 			renderView={renderView}
 			renderTrackHorizontal={
@@ -43,18 +46,9 @@ const ScrollableContentWrapper = forwardRef<HTMLElement, CustomScrollbarsProps>(
 				<div {...props} style={{ ...style, backgroundColor: 'rgba(0, 0, 0, 0.5)', borderRadius: '7px' }} />
 			)}
 			children={children}
-			ref={(sRef): void => {
-				if (ref && sRef) {
-					if (typeof ref === 'function') {
-						ref(sRef.view ?? null);
-						return;
-					}
-
-					(ref as MutableRefObject<HTMLElement | undefined>).current = sRef.view;
-				}
-			}}
+			ref={refSetter}
 		/>
 	);
 });
 
-export default memo(ScrollableContentWrapper);
+export default memo(CustomScrollbars);

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

@@ -0,0 +1,23 @@
+import type { ComponentProps, ReactElement, Ref } from 'react';
+import React, { forwardRef } from 'react';
+
+import CustomScrollbars from './CustomScrollbars';
+
+type VirtuosoScrollbarsProps = ComponentProps<typeof CustomScrollbars>;
+
+const VirtuosoScrollbars = forwardRef(function VirtuosoScrollbars(
+	{ style, children, ...props }: VirtuosoScrollbarsProps,
+	ref: Ref<HTMLDivElement>,
+): ReactElement {
+	return (
+		<CustomScrollbars
+			style={{ ...style, flexGrow: 1, overflowY: 'hidden', width: '100%', willChange: 'transform' }}
+			ref={ref}
+			renderView={(viewProps): ReactElement => <div {...viewProps} {...props} />}
+		>
+			{children}
+		</CustomScrollbars>
+	);
+});
+
+export default VirtuosoScrollbars;

apps/meteor/client/components/CustomScrollbars/index.ts

@@ -0,0 +1,3 @@
+export { default as CustomScrollbars } from './CustomScrollbars';
+export { default as VirtuosoScrollbars } from './VirtuosoScrollbars';
+export * from './CustomScrollbars';

apps/meteor/client/components/GenericTable/GenericTable.tsx

@@ -2,7 +2,7 @@ import { Box, Table } from '@rocket.chat/fuselage';
 import type { ComponentProps } from 'react';
 import React, { type ForwardedRef, type ReactNode, forwardRef } from 'react';
 
-import ScrollableContentWrapper from '../ScrollableContentWrapper';
+import { CustomScrollbars } from '../CustomScrollbars';
 
 type GenericTableProps = {
 	fixed?: boolean;
@@ -15,11 +15,11 @@ export const GenericTable = forwardRef(function GenericTable(
 ) {
 	return (
 		<Box mi='neg-x24' pi={24} flexShrink={1} flexGrow={1} ref={ref} overflow='hidden'>
-			<ScrollableContentWrapper overflowX>
+			<CustomScrollbars overflowX>
 				<Table fixed={fixed} sticky {...props}>
 					{children}
 				</Table>
-			</ScrollableContentWrapper>
+			</CustomScrollbars>
 		</Box>
 	);
 });

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

@@ -3,8 +3,8 @@ import { Box } from '@rocket.chat/fuselage';
 import type { ComponentProps } from 'react';
 import React, { forwardRef } from 'react';
 
-import type { CustomScrollbarsProps } from '../ScrollableContentWrapper';
-import ScrollableContentWrapper from '../ScrollableContentWrapper';
+import type { CustomScrollbarsProps } from '../CustomScrollbars';
+import { CustomScrollbars } from '../CustomScrollbars';
 
 type PageScrollableContentProps = {
 	onScrollContent?: ComponentProps<typeof Scrollable>['onScrollContent'];
@@ -24,9 +24,9 @@ const PageScrollableContent = forwardRef<HTMLElement, PageScrollableContentProps
 			overflow='hidden'
 			borderBlockEndColor={borderBlockEndColor}
 		>
-			<ScrollableContentWrapper onScroll={onScrollContent as CustomScrollbarsProps['onScroll']} ref={ref as any}>
+			<CustomScrollbars onScroll={onScrollContent as CustomScrollbarsProps['onScroll']} ref={ref as any}>
 				<Box paddingBlock={16} paddingInline={24} display='flex' flexDirection='column' flexGrow={1} {...props} />
-			</ScrollableContentWrapper>
+			</CustomScrollbars>
 		</Box>
 	);
 });

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

@@ -2,15 +2,15 @@ import { Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
 import React from 'react';
 
-import ScrollableContentWrapper from '../ScrollableContentWrapper';
+import { CustomScrollbars } from '../CustomScrollbars';
 
 const Content: FC = ({ children, ...props }) => (
 	<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} overflow='hidden'>
-		<ScrollableContentWrapper {...props}>
+		<CustomScrollbars {...props}>
 			<Box display='flex' flexDirection='column' w='full' h='full'>
 				{children}
 			</Box>
-		</ScrollableContentWrapper>
+		</CustomScrollbars>
 	</Box>
 );
 

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

@@ -7,14 +7,14 @@ import type { ReactElement } from 'react';
 import React, { useMemo } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
+import { VirtuosoScrollbars } from '../../components/CustomScrollbars';
 import { useOpenedRoom } from '../../lib/RoomManager';
 import { useAvatarTemplate } from '../hooks/useAvatarTemplate';
 import { usePreventDefault } from '../hooks/usePreventDefault';
 import { useRoomList } from '../hooks/useRoomList';
 import { useShortcutOpenMenu } from '../hooks/useShortcutOpenMenu';
 import { useTemplateByViewMode } from '../hooks/useTemplateByViewMode';
 import RoomListRow from './RoomListRow';
-import ScrollerWithCustomProps from './ScrollerWithCustomProps';
 
 const computeItemKey = (index: number, room: IRoom): IRoom['_id'] | number => room._id || index;
 
@@ -121,7 +121,7 @@ const RoomList = (): ReactElement => {
 				<Virtuoso
 					totalCount={roomsList.length}
 					data={roomsList}
-					components={{ Scroller: ScrollerWithCustomProps }}
+					components={{ Scroller: VirtuosoScrollbars }}
 					computeItemKey={computeItemKey}
 					itemContent={(_, data): ReactElement => <RoomListRow data={itemData} item={data} />}
 				/>

apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomList.tsx

@@ -6,7 +6,7 @@ import type { VFC } from 'react';
 import React from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-import ScrollableContentWrapper from '../../../components/ScrollableContentWrapper';
+import { VirtuosoScrollbars } from '../../../components/CustomScrollbars';
 import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
 import FederatedRoomListEmptyPlaceholder from './FederatedRoomListEmptyPlaceholder';
 import FederatedRoomListItem from './FederatedRoomListItem';
@@ -68,7 +68,7 @@ const FederatedRoomList: VFC<FederatedRoomListProps> = ({ serverName, roomName,
 				components={{
 					// eslint-disable-next-line react/no-multi-comp
 					Footer: () => (isFetchingNextPage ? <Throbber /> : null),
-					Scroller: ScrollableContentWrapper,
+					Scroller: VirtuosoScrollbars,
 					EmptyPlaceholder: FederatedRoomListEmptyPlaceholder,
 				}}
 				endReached={isLoading || isFetchingNextPage ? () => undefined : () => fetchNextPage()}

apps/meteor/client/sidebar/search/SearchList.tsx

@@ -12,12 +12,12 @@ import type { VirtuosoHandle } from 'react-virtuoso';
 import { Virtuoso } from 'react-virtuoso';
 import tinykeys from 'tinykeys';
 
+import { VirtuosoScrollbars } from '../../components/CustomScrollbars';
 import { getConfig } from '../../lib/utils/getConfig';
 import { useAvatarTemplate } from '../hooks/useAvatarTemplate';
 import { usePreventDefault } from '../hooks/usePreventDefault';
 import { useTemplateByViewMode } from '../hooks/useTemplateByViewMode';
 import Row from './Row';
-import ScrollerWithCustomProps from './ScrollerWithCustomProps';
 
 const mobileCheck = function () {
 	let check = false;
@@ -366,7 +366,7 @@ const SearchList = forwardRef(function SearchList({ onClose }: SearchListProps,
 					style={{ height: '100%', width: '100%' }}
 					totalCount={items.length}
 					data={items}
-					components={{ Scroller: ScrollerWithCustomProps }}
+					components={{ Scroller: VirtuosoScrollbars }}
 					computeItemKey={(_, room) => room._id}
 					itemContent={(_, data): ReactElement => <Row data={itemData} item={data} />}
 					ref={listRef}

apps/meteor/client/views/admin/integrations/outgoing/history/OutgoingWebhookHistoryPage.tsx

@@ -5,9 +5,9 @@ import type { ComponentProps } from 'react';
 import React, { useMemo, useState, useEffect } from 'react';
 
 import { sdk } from '../../../../../../app/utils/client/lib/SDKClient';
+import { CustomScrollbars } from '../../../../../components/CustomScrollbars';
 import { usePagination } from '../../../../../components/GenericTable/hooks/usePagination';
 import { Page, PageHeader, PageContent } from '../../../../../components/Page';
-import ScrollableContentWrapper from '../../../../../components/ScrollableContentWrapper';
 import HistoryContent from './HistoryContent';
 
 const OutgoingWebhookHistoryPage = (props: ComponentProps<typeof Page>) => {
@@ -117,9 +117,9 @@ const OutgoingWebhookHistoryPage = (props: ComponentProps<typeof Page>) => {
 				</ButtonGroup>
 			</PageHeader>
 			<PageContent>
-				<ScrollableContentWrapper>
+				<CustomScrollbars>
 					<HistoryContent key='historyContent' data={data?.history || []} isLoading={isLoading} />
-				</ScrollableContentWrapper>
+				</CustomScrollbars>
 				<Pagination
 					current={current}
 					itemsPerPage={itemsPerPage}

apps/meteor/client/views/composer/EmojiPicker/CategoriesResult.tsx

@@ -6,7 +6,7 @@ import type { VirtuosoHandle } from 'react-virtuoso';
 import { Virtuoso } from 'react-virtuoso';
 
 import type { EmojiCategoryPosition, EmojiByCategory } from '../../../../app/emoji/client';
-import ScrollableContentWrapper from '../../../components/ScrollableContentWrapper';
+import { VirtuosoScrollbars } from '../../../components/CustomScrollbars';
 import EmojiCategoryRow from './EmojiCategoryRow';
 
 type CategoriesResultProps = {
@@ -15,7 +15,7 @@ type CategoriesResultProps = {
 	customItemsLimit: number;
 	handleLoadMore: () => void;
 	handleSelectEmoji: (event: MouseEvent<HTMLElement>) => void;
-	handleScroll: UIEventHandler<'div'>;
+	handleScroll: UIEventHandler<HTMLDivElement>;
 };
 
 const CategoriesResult = forwardRef<VirtuosoHandle, CategoriesResultProps>(function CategoriesResult(
@@ -39,7 +39,7 @@ const CategoriesResult = forwardRef<VirtuosoHandle, CategoriesResultProps>(funct
 				totalCount={emojiListByCategory.length}
 				data={emojiListByCategory}
 				onScroll={handleScroll}
-				components={{ Scroller: ScrollableContentWrapper }}
+				components={{ Scroller: VirtuosoScrollbars }}
 				isScrolling={(isScrolling: boolean) => {
 					if (!wrapper.current) {
 						return;

apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx

@@ -6,7 +6,7 @@ import type { VirtuosoGridHandle } from 'react-virtuoso';
 import { VirtuosoGrid } from 'react-virtuoso';
 
 import type { EmojiItem } from '../../../../app/emoji/client';
-import ScrollableContentWrapper from '../../../components/ScrollableContentWrapper';
+import { VirtuosoScrollbars } from '../../../components/CustomScrollbars';
 import EmojiElement from './EmojiElement';
 import SearchingResultWrapper from './SearchingResultWrapper';
 
@@ -33,7 +33,7 @@ const SearchingResult = ({ searchResults, handleSelectEmoji }: SearchingResultPr
 			ref={ref}
 			totalCount={searchResults.length}
 			components={{
-				Scroller: ScrollableContentWrapper,
+				Scroller: VirtuosoScrollbars,
 				List: SearchingResultWrapper,
 			}}
 			itemContent={(index) => {

apps/meteor/client/views/omnichannel/contactHistory/ContactHistoryList.tsx

@@ -12,7 +12,7 @@ import {
 	ContextualbarClose,
 	ContextualbarEmptyContent,
 } from '../../../components/Contextualbar';
-import ScrollableContentWrapper from '../../../components/ScrollableContentWrapper';
+import { VirtuosoScrollbars } from '../../../components/CustomScrollbars';
 import { useRecordList } from '../../../hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../../../lib/asyncState';
 import { useOmnichannelRoom } from '../../room/contexts/RoomContext';
@@ -86,7 +86,7 @@ const ContactHistoryList = ({ setChatId, close }: { setChatId: Dispatch<SetState
 							}
 							overscan={25}
 							data={history}
-							components={{ Scroller: ScrollableContentWrapper as any }}
+							components={{ Scroller: VirtuosoScrollbars }}
 							itemContent={(index, data): ReactElement => <ContactHistoryItem key={index} history={data} setChatId={setChatId} />}
 						/>
 					)}

apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx

@@ -13,7 +13,7 @@ import {
 	ContextualbarContent,
 	ContextualbarEmptyContent,
 } from '../../../../components/Contextualbar';
-import ScrollableContentWrapper from '../../../../components/ScrollableContentWrapper';
+import { VirtuosoScrollbars } from '../../../../components/CustomScrollbars';
 import { useRecordList } from '../../../../hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../../../../lib/asyncState';
 import { isMessageNewDay } from '../../../room/MessageList/lib/isMessageNewDay';
@@ -98,7 +98,7 @@ const ContactHistoryMessagesList = ({
 							}
 							overscan={25}
 							data={messages}
-							components={{ Scroller: ScrollableContentWrapper as any }}
+							components={{ Scroller: VirtuosoScrollbars }}
 							itemContent={(index, data): ReactElement => {
 								const lastMessage = messages[index - 1];
 								const isSequential = isMessageSequential(data, lastMessage, messageGroupingPeriod);

apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx

@@ -14,7 +14,7 @@ import {
 	ContextualbarFooter,
 	ContextualbarSkeleton,
 } from '../../../components/Contextualbar';
-import ScrollableContentWrapper from '../../../components/ScrollableContentWrapper';
+import { VirtuosoScrollbars } from '../../../components/CustomScrollbars';
 import { getErrorMessage } from '../../../lib/errorHandling';
 import { useOutlookAuthentication } from '../hooks/useOutlookAuthentication';
 import { useMutationOutlookCalendarSync, useOutlookCalendarListForToday } from '../hooks/useOutlookCalendarList';
@@ -108,7 +108,7 @@ const OutlookEventsList = ({ onClose, changeRoute }: OutlookEventsListProps): Re
 									totalCount={total}
 									overscan={25}
 									data={calendarEvents}
-									components={{ Scroller: ScrollableContentWrapper }}
+									components={{ Scroller: VirtuosoScrollbars }}
 									itemContent={(_index, calendarData): ReactElement => <OutlookEventItem {...calendarData} />}
 								/>
 							</Box>