React.ReactElement };
-// Use first 10 room IDs for this story
-const storyRoomIds = mockRoomIds.slice(0, 10);
-
// Wrapper component that creates a mocked ViewModel
const RoomListWrapperImpl = ({
onToggleFilter,
createChatRoom,
createRoom,
getRoomItemViewModel,
+ getSectionHeaderViewModel,
updateVisibleRooms,
renderAvatar: renderAvatarProp,
...rest
@@ -37,6 +41,7 @@ const RoomListWrapperImpl = ({
createChatRoom,
createRoom,
getRoomItemViewModel,
+ getSectionHeaderViewModel,
updateVisibleRooms,
});
@@ -65,15 +70,17 @@ const meta = {
isRoomListEmpty: false,
filterIds: mockFilterIds,
activeFilterId: undefined,
- roomIds: storyRoomIds,
+ sections: mock10RoomsSections,
roomListState: defaultRoomListState,
canCreateRoom: true,
onToggleFilter: fn(),
createChatRoom: fn(),
createRoom: fn(),
- getRoomItemViewModel: createGetRoomItemViewModel(storyRoomIds),
+ getRoomItemViewModel: createGetRoomItemViewModel(mock10RoomsIds),
+ getSectionHeaderViewModel: createGetSectionHeaderViewModel(mock10RoomsSections.map((section) => section.id)),
updateVisibleRooms: fn(),
renderAvatar,
+ isFlatList: true,
},
parameters: {
design: {
@@ -94,3 +101,9 @@ export default meta;
type Story = StoryObj;
export const Default: Story = {};
+
+export const Sections: Story = {
+ args: {
+ isFlatList: false,
+ },
+};
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx
index 71cd554ecc6..63f7761d95d 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx
@@ -9,11 +9,18 @@ import React, { useCallback, useMemo, useRef, type JSX, type ReactNode } from "r
import { type ScrollIntoViewLocation } from "react-virtuoso";
import { isEqual } from "lodash";
-import { RoomListItemView, type Room } from "../RoomListItemView";
+import { type Room } from "../RoomListItemView";
import { useViewModel } from "../../viewmodel";
import { _t } from "../../utils/i18n";
-import { FlatVirtualizedList, type VirtualizedListContext } from "../../utils/VirtualizedList";
-import type { RoomListViewModel } from "../RoomListView";
+import {
+ FlatVirtualizedList,
+ getContainerAccessibleProps,
+ type VirtualizedListContext,
+} from "../../utils/VirtualizedList";
+import type { RoomListSnapshot, RoomListViewModel } from "../RoomListView";
+import { GroupedVirtualizedList } from "../../utils/VirtualizedList";
+import { RoomListSectionHeaderView } from "../RoomListSectionHeaderView";
+import { RoomListItemAccessibilityWrapper } from "../RoomListItemAccessibilityWrapper";
/**
* Filter key type - opaque string type for filter identifiers
@@ -59,7 +66,24 @@ const ROOM_LIST_ITEM_HEIGHT = 52;
/**
* Type for context used in ListView
*/
-type Context = { spaceId: string; filterKeys: FilterKey[] | undefined };
+type Context = {
+ /** Space ID for context tracking */
+ spaceId: string;
+ /** Active filter keys for context tracking */
+ filterKeys: FilterKey[] | undefined;
+ /** Active room index for keyboard navigation */
+ activeRoomIndex: number | undefined;
+ /** Sections of the room list */
+ sections: RoomListSnapshot["sections"];
+ /** Total number of rooms in the list */
+ roomCount: number;
+ /** Number of sections in the list */
+ sectionCount: number;
+ /** Room list view model */
+ vm: RoomListViewModel;
+ /** List is in flat or section mode */
+ isFlatList: boolean;
+};
/**
* Amount to extend the top and bottom of the viewport by.
@@ -83,11 +107,23 @@ const EXTENDED_VIEWPORT_HEIGHT = 25 * ROOM_LIST_ITEM_HEIGHT;
*/
export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: VirtualizedRoomListViewProps): JSX.Element {
const snapshot = useViewModel(vm);
- const { roomListState, roomIds } = snapshot;
+ const { roomListState, sections, isFlatList } = snapshot;
const activeRoomIndex = roomListState.activeRoomIndex;
const lastSpaceId = useRef(undefined);
const lastFilterKeys = useRef(undefined);
+ const roomIds = useMemo(() => sections.flatMap((section) => section.roomIds), [sections]);
const roomCount = roomIds.length;
+ const sectionCount = sections.length;
+ const totalCount = roomCount + sectionCount;
+
+ const groups = useMemo(
+ () =>
+ sections.map((section) => ({
+ header: section.id,
+ items: section.roomIds,
+ })),
+ [sections],
+ );
/**
* Callback when the visible range changes
@@ -110,7 +146,9 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
roomId: string,
context: VirtualizedListContext,
onFocus: (item: string, e: React.FocusEvent) => void,
+ roomIndexInSection: number,
): JSX.Element => {
+ const { activeRoomIndex, roomCount, vm, isFlatList } = context.context;
const isSelected = activeRoomIndex === index;
const roomItemVM = vm.getRoomItemViewModel(roomId);
@@ -118,8 +156,11 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
// This matches the old RoomList implementation's roving tabindex pattern
const isFocused = context.focused && context.tabIndexKey === roomId;
+ const isFirstItem = index === 0;
+ const isLastItem = index === roomCount - 1;
+
return (
-
+ );
+ },
+ [renderAvatar],
+ );
+
+ /**
+ * Get the item component for a specific index in a grouped list
+ * Since we have sections, we can calculate the room's index within its section and pass it to getItemComponent
+ * Gets the room's view model and passes it to RoomListItemView
+ */
+ const getItemComponentForGroupedList = useCallback(
+ (
+ index: number,
+ roomId: string,
+ context: VirtualizedListContext,
+ onFocus: (item: string, e: React.FocusEvent) => void,
+ groupIndex: number,
+ ): JSX.Element => {
+ const { sections } = context.context;
+ const roomIndexInSection = sections[groupIndex].roomIds.findIndex((id) => id === roomId);
+ return getItemComponent(index, roomId, context, onFocus, roomIndexInSection);
+ },
+ [getItemComponent],
+ );
+
+ /**
+ * Get the item component for a specific index in a flat list
+ * Since we don't have sections, we can pass 0 for the room's index within its section to getItemComponent
+ * Gets the room's view model and passes it to RoomListItemView
+ */
+ const getItemComponentForFlatList = useCallback(
+ (
+ index: number,
+ roomId: string,
+ context: VirtualizedListContext,
+ onFocus: (item: string, e: React.FocusEvent) => void,
+ ): JSX.Element => {
+ // For a flat list, we don't have sections, so roomIndexInSection is unused and can be set to 0
+ return getItemComponent(index, roomId, context, onFocus, 0);
+ },
+ [getItemComponent],
+ );
+
+ /**
+ * Get the group header component for a specific group
+ */
+ const getGroupHeaderComponent = useCallback(
+ (
+ groupIndex: number,
+ headerId: string,
+ context: VirtualizedListContext,
+ onFocus: (header: string, e: React.FocusEvent) => void,
+ ): JSX.Element => {
+ const { vm, sectionCount, sections } = context.context;
+ const sectionHeaderVM = vm.getSectionHeaderViewModel(headerId);
+ const indexInList = sections
+ .slice(0, groupIndex)
+ // +1 for each section header
+ .reduce((acc, section) => acc + section.roomIds.length + 1, 0);
+ const roomCountInSection = sections[groupIndex].roomIds.length;
+
+ // Item is focused when the list has focus AND this item's key matches tabIndexKey
+ // This matches the old RoomList implementation's roving tabindex pattern
+ const isFocused = context.focused && context.tabIndexKey === headerId;
+
+ return (
+
);
},
- [activeRoomIndex, roomCount, renderAvatar, vm],
+ [],
);
/**
* Get the key for a room item
* Since we're using virtualization, items are always room ID strings
*/
- const getItemKey = useCallback((item: string): string => {
- return item;
- }, []);
+ const getItemKey = useCallback((item: string): string => item, []);
+
+ /**
+ * Get the key for a group header
+ * We are passing the section ID as the header key, which is a string, so we can return it directly
+ */
+ const getHeaderKey = useCallback((header: string): string => header, []);
const context = useMemo(
- () => ({ spaceId: roomListState.spaceId || "", filterKeys: roomListState.filterKeys }),
- [roomListState.spaceId, roomListState.filterKeys],
+ () => ({
+ spaceId: roomListState.spaceId || "",
+ filterKeys: roomListState.filterKeys,
+ sections,
+ activeRoomIndex,
+ roomCount,
+ sectionCount,
+ vm,
+ isFlatList,
+ }),
+ [
+ roomListState.spaceId,
+ roomListState.filterKeys,
+ sections,
+ activeRoomIndex,
+ roomCount,
+ sectionCount,
+ vm,
+ isFlatList,
+ ],
);
/**
@@ -173,26 +315,51 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
[activeRoomIndex],
);
+ const isItemFocusable = useCallback(() => true, []);
+ const isGroupHeaderFocusable = useCallback(() => true, []);
+ const increaseViewportBy = useMemo(
+ () => ({
+ top: EXTENDED_VIEWPORT_HEIGHT,
+ bottom: EXTENDED_VIEWPORT_HEIGHT,
+ }),
+ [],
+ );
+
+ const commonProps = {
+ context,
+ scrollIntoViewOnChange,
+ // If fixedItemHeight is not set and initialTopMostItemIndex=undefined, virtuoso crashes
+ // If we don't set it, it works
+ ...(activeRoomIndex !== undefined ? { initialTopMostItemIndex: activeRoomIndex } : {}),
+ ["data-testid"]: "room-list",
+ ["aria-label"]: _t("room_list|list_title"),
+ getItemKey,
+ isItemFocusable,
+ rangeChanged,
+ onKeyDown,
+ increaseViewportBy,
+ };
+
+ if (isFlatList) {
+ return (
+
+ );
+ }
+
return (
- true}
- rangeChanged={rangeChanged}
- onKeyDown={onKeyDown}
- increaseViewportBy={{
- bottom: EXTENDED_VIEWPORT_HEIGHT,
- top: EXTENDED_VIEWPORT_HEIGHT,
- }}
+
+ {...commonProps}
+ {...getContainerAccessibleProps("treegrid", totalCount)}
+ groups={groups}
+ getHeaderKey={getHeaderKey}
+ getGroupHeaderComponent={getGroupHeaderComponent}
+ getItemComponent={getItemComponentForGroupedList}
+ isGroupHeaderFocusable={isGroupHeaderFocusable}
/>
);
}
diff --git a/packages/shared-components/src/room-list/story-mocks.tsx b/packages/shared-components/src/room-list/story-mocks.tsx
index 1958a06419c..156858edcd1 100644
--- a/packages/shared-components/src/room-list/story-mocks.tsx
+++ b/packages/shared-components/src/room-list/story-mocks.tsx
@@ -9,6 +9,8 @@ import React from "react";
import { fn } from "storybook/test";
import { type Room, type RoomItemViewModel, type RoomListItemSnapshot, RoomNotifState } from "./RoomListItemView";
+import { type RoomListSectionHeaderViewModel } from "./RoomListSectionHeaderView";
+import { MockViewModel } from "../viewmodel";
/**
* Mock avatar component for stories
@@ -100,6 +102,23 @@ export const createMockRoomSnapshot = (id: string, name: string, index: number):
roomNotifState: RoomNotifState.AllMessages,
});
+export function createMockRoomItemViewModel(roomId: string, name: string, index: number): RoomItemViewModel {
+ const snapshot = createMockRoomSnapshot(roomId, name, index);
+ return {
+ getSnapshot: () => snapshot,
+ subscribe: fn(),
+ onOpenRoom: fn(),
+ onMarkAsRead: fn(),
+ onMarkAsUnread: fn(),
+ onToggleFavorite: fn(),
+ onToggleLowPriority: fn(),
+ onInvite: fn(),
+ onCopyRoomLink: fn(),
+ onLeaveRoom: fn(),
+ onSetRoomNotifState: fn(),
+ };
+}
+
/**
* Create a mock getRoomItemViewModel function for stories
*/
@@ -107,31 +126,60 @@ export const createGetRoomItemViewModel = (roomIds: string[]): ((roomId: string)
const viewModels = new Map();
roomIds.forEach((roomId, index) => {
const name = roomNames[index % roomNames.length];
- const snapshot = createMockRoomSnapshot(roomId, name, index);
-
- const mockViewModel = {
- getSnapshot: () => snapshot,
- subscribe: fn(),
- unsubscribe: fn(),
- onOpenRoom: fn(),
- onMarkAsRead: fn(),
- onMarkAsUnread: fn(),
- onToggleFavorite: fn(),
- onToggleLowPriority: fn(),
- onInvite: fn(),
- onCopyRoomLink: fn(),
- onLeaveRoom: fn(),
- onSetRoomNotifState: fn(),
- };
- viewModels.set(roomId, mockViewModel);
+ viewModels.set(roomId, createMockRoomItemViewModel(roomId, name, index));
});
return (roomId: string) => viewModels.get(roomId)!;
};
+export const createGetSectionHeaderViewModel = (
+ sectionIds: string[],
+): ((sectionId: string) => RoomListSectionHeaderViewModel) => {
+ const viewModels = new Map();
+ sectionIds.forEach((sectionId) => {
+ const snapshot = {
+ id: sectionId,
+ title: sectionId[0].toUpperCase() + sectionId.slice(1),
+ isExpanded: true,
+ };
+ const vm = new MockViewModel(snapshot) as unknown as RoomListSectionHeaderViewModel;
+ Object.assign(vm, {
+ onClick: fn(),
+ onFocus: fn(),
+ });
+
+ viewModels.set(sectionId, vm);
+ });
+
+ return (sectionId: string) => viewModels.get(sectionId)!;
+};
+
/**
* Mock room IDs for different list sizes
*/
+export const mock10RoomsIds = Array.from({ length: 10 }, (_, i) => `!room${i}:server`);
+export const mock10RoomsSections = [
+ { id: "favourites", roomIds: mock10RoomsIds.slice(0, 3) },
+ { id: "chats", roomIds: mock10RoomsIds.slice(3, 4) },
+ { id: "low-priority", roomIds: mock10RoomsIds.slice(4) },
+];
+
export const mockRoomIds = Array.from({ length: 20 }, (_, i) => `!room${i}:server`);
-export const smallListRoomIds = mockRoomIds.slice(0, 5);
-export const largeListRoomIds = Array.from({ length: 100 }, (_, i) => `!room${i}:server`);
+export const mockSections = [
+ { id: "favourites", roomIds: mockRoomIds.slice(0, 5) },
+ { id: "chats", roomIds: mockRoomIds.slice(5, 15) },
+ { id: "low-priority", roomIds: mockRoomIds.slice(15) },
+];
+
+export const mockSmallListRoomIds = mockRoomIds.slice(0, 5);
+export const mockSmallListSections = [
+ { id: "favourites", roomIds: mockSmallListRoomIds.slice(0, 2) },
+ { id: "chats", roomIds: mockSmallListRoomIds.slice(2, 0) },
+];
+
+export const mockLargeListRoomIds = Array.from({ length: 100 }, (_, i) => `!room${i}:server`);
+export const mockLargeListSections = [
+ { id: "favourites", roomIds: mockLargeListRoomIds.slice(0, 23) },
+ { id: "chats", roomIds: mockLargeListRoomIds.slice(23, 52) },
+ { id: "low-priority", roomIds: mockLargeListRoomIds.slice(52) },
+];
diff --git a/packages/shared-components/vitest.config.ts b/packages/shared-components/vitest.config.ts
index b28a1718e34..7b0f22f9e09 100644
--- a/packages/shared-components/vitest.config.ts
+++ b/packages/shared-components/vitest.config.ts
@@ -153,11 +153,7 @@ export default defineConfig({
],
},
optimizeDeps: {
- include: [
- "vite-plugin-node-polyfills/shims/buffer",
- "vite-plugin-node-polyfills/shims/process",
- "react-virtuoso",
- ],
+ include: ["vite-plugin-node-polyfills/shims/buffer", "vite-plugin-node-polyfills/shims/process"],
},
resolve: {
alias: {