Room list: scroll to newly creation section (#33210)

* feat(rls): emit tag when section is created

* feat(vm): scroll to newly section tag

* feat(view): scroll to new section

packages/shared-components/src/core/VirtualizedList/GroupedVirtualizedList/GroupedVirtualizedList.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { type JSX, useCallback, useMemo } from "react";
-import { Virtuoso } from "react-virtuoso";
+import { Virtuoso, type VirtuosoHandle } from "react-virtuoso";
 
 import { useVirtualizedList, type VirtualizedListContext, type VirtualizedListProps } from "../virtualized-list";
 
@@ -33,6 +33,11 @@ export interface GroupedVirtualizedListProps<Header, Item, Context> extends Omit
     VirtualizedListProps<Item, Context>,
     "items" | "isItemFocusable" | "getItemKey"
 > {
+    /**
+     * Optional ref to the underlying Virtuoso handle, for imperative scrolling.
+     */
+    scrollHandleRef?: React.RefCallback<VirtuosoHandle>;
+
     /**
      * The groups to display in the virtualized list.
      * Each group has a header and an array of child items.
@@ -126,6 +131,7 @@ export function GroupedVirtualizedList<Header, Item, Context>(
         isGroupHeaderFocusable,
         getItemKey,
         getHeaderKey,
+        scrollHandleRef,
         ...restProps
     } = props;
 
@@ -171,6 +177,7 @@ export function GroupedVirtualizedList<Header, Item, Context>(
             isItemFocusable: wrappedIsEntryFocusable,
             getItemKey: wrappedGetEntryKey,
         },
+        scrollHandleRef,
     );
 
     // Convert (Item, e) → (NavigationEntry, e) for regular items

packages/shared-components/src/core/VirtualizedList/virtualized-list.tsx

@@ -128,7 +128,7 @@ export interface UseVirtualizedListResult<Item, Context> extends Omit<
     VirtuosoProps<Item, VirtualizedListContext<Context>>,
     "data" | "itemContent" | "context" | "onKeyDown" | "onFocus" | "onBlur" | "rangeChanged" | "scrollerRef" | "ref"
 > {
-    ref: React.RefObject<VirtuosoHandle | null>;
+    ref: React.RefCallback<VirtuosoHandle>;
     scrollerRef: (element: HTMLElement | Window | null) => void;
     onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     onFocus: (e: React.FocusEvent) => void;
@@ -155,6 +155,7 @@ export interface UseVirtualizedListResult<Item, Context> extends Omit<
  */
 export function useVirtualizedList<Item, Context>(
     props: VirtualizedListProps<Item, Context>,
+    handleRef?: React.RefCallback<VirtuosoHandle>,
 ): UseVirtualizedListResult<Item, Context> {
     // Extract our custom props to avoid conflicts with Virtuoso props
     const {
@@ -380,9 +381,17 @@ export function useVirtualizedList<Item, Context>(
         [rangeChanged, mapRangeIndex],
     );
 
+    const setRef = useCallback(
+        (handle: VirtuosoHandle | null) => {
+            virtuosoHandleRef.current = handle;
+            handleRef?.(handle);
+        },
+        [handleRef],
+    );
+
     return {
         ...virtuosoProps,
-        ref: virtuosoHandleRef,
+        ref: setRef,
         scrollerRef,
         onKeyDown: keyDownCallback,
         onFocus,