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>