Remove usages of forwardRef

It has been deprecated in React 19, which allows functional components to receive refs just like any other prop.

src/grid/Grid.tsx

@@ -18,11 +18,10 @@ import {
   type ComponentType,
   type Dispatch,
   type FC,
-  type LegacyRef,
   type ReactNode,
+  type Ref,
   type SetStateAction,
   createContext,
-  forwardRef,
   memo,
   useContext,
   useEffect,
@@ -162,7 +161,7 @@ const windowHeightObservable$ = fromEvent(window, "resize").pipe(
 );
 
 export interface LayoutProps<LayoutModel, TileModel, R extends HTMLElement> {
-  ref: LegacyRef<R>;
+  ref?: Ref<R>;
   model: LayoutModel;
   /**
    * Component creating an invisible "slot" for a tile to go in.
@@ -171,7 +170,7 @@ export interface LayoutProps<LayoutModel, TileModel, R extends HTMLElement> {
 }
 
 export interface TileProps<Model, R extends HTMLElement> {
-  ref: LegacyRef<R>;
+  ref?: Ref<R>;
   className?: string;
   style?: ComponentProps<typeof animated.div>["style"];
   /**
@@ -297,14 +296,13 @@ export function Grid<
   // render of Grid causes a re-render of Layout, which in turn re-renders Grid
   const LayoutMemo = useMemo(
     () =>
-      memo(
-        forwardRef<
-          LayoutRef,
-          LayoutMemoProps<LayoutModel, TileModel, LayoutRef>
-        >(function LayoutMemo({ Layout, ...props }, ref): ReactNode {
-          return <Layout {...props} ref={ref} />;
-        }),
-      ),
+      memo(function LayoutMemo({
+        ref,
+        Layout,
+        ...props
+      }: LayoutMemoProps<LayoutModel, TileModel, LayoutRef>): ReactNode {
+        return <Layout {...props} ref={ref} />;
+      }),
     [],
   );
 

src/grid/GridLayout.tsx

@@ -5,7 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type CSSProperties, forwardRef, useCallback, useMemo } from "react";
+import {
+  type CSSProperties,
+  type ReactNode,
+  useCallback,
+  useMemo,
+} from "react";
 import { distinctUntilChanged } from "rxjs";
 import { useObservableEagerState } from "observable-hooks";
 
@@ -33,7 +38,7 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
 
   // The "fixed" (non-scrolling) part of the layout is where the spotlight tile
   // lives
-  fixed: forwardRef(function GridLayoutFixed({ model, Slot }, ref) {
+  fixed: function GridLayoutFixed({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
     const alignment = useObservableEagerState(
       useInitial(() =>
@@ -68,10 +73,10 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
         )}
       </div>
     );
-  }),
+  },
 
   // The scrolling part of the layout is where all the grid tiles live
-  scrolling: forwardRef(function GridLayout({ model, Slot }, ref) {
+  scrolling: function GridLayout({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
     const { width, height: minHeight } = useObservableEagerState(minBounds$);
@@ -98,5 +103,5 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
         ))}
       </div>
     );
-  }),
+  },
 });

src/grid/OneOnOneLayout.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { forwardRef, useCallback, useMemo } from "react";
+import { type ReactNode, useCallback, useMemo } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
@@ -24,12 +24,12 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
 }) => ({
   scrollingOnTop: false,
 
-  fixed: forwardRef(function OneOnOneLayoutFixed(_props, ref) {
+  fixed: function OneOnOneLayoutFixed({ ref }): ReactNode {
     useUpdateLayout();
     return <div ref={ref} />;
-  }),
+  },
 
-  scrolling: forwardRef(function OneOnOneLayoutScrolling({ model, Slot }, ref) {
+  scrolling: function OneOnOneLayoutScrolling({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
     const { width, height } = useObservableEagerState(minBounds$);
     const pipAlignmentValue = useObservableEagerState(pipAlignment$);
@@ -66,5 +66,5 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
         </Slot>
       </div>
     );
-  }),
+  },
 });

src/grid/SpotlightExpandedLayout.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { forwardRef, useCallback } from "react";
+import { type ReactNode, useCallback } from "react";
 import { useObservableEagerState } from "observable-hooks";
 
 import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
@@ -22,10 +22,11 @@ export const makeSpotlightExpandedLayout: CallLayout<
 > = ({ pipAlignment$ }) => ({
   scrollingOnTop: true,
 
-  fixed: forwardRef(function SpotlightExpandedLayoutFixed(
-    { model, Slot },
+  fixed: function SpotlightExpandedLayoutFixed({
     ref,
-  ) {
+    model,
+    Slot,
+  }): ReactNode {
     useUpdateLayout();
 
     return (
@@ -37,12 +38,13 @@ export const makeSpotlightExpandedLayout: CallLayout<
         />
       </div>
     );
-  }),
+  },
 
-  scrolling: forwardRef(function SpotlightExpandedLayoutScrolling(
-    { model, Slot },
+  scrolling: function SpotlightExpandedLayoutScrolling({
     ref,
-  ) {
+    model,
+    Slot,
+  }): ReactNode {
     useUpdateLayout();
     const pipAlignmentValue = useObservableEagerState(pipAlignment$);
 
@@ -69,5 +71,5 @@ export const makeSpotlightExpandedLayout: CallLayout<
         )}
       </div>
     );
-  }),
+  },
 });

src/grid/SpotlightLandscapeLayout.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { forwardRef } from "react";
+import { type ReactNode } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
@@ -24,10 +24,11 @@ export const makeSpotlightLandscapeLayout: CallLayout<
 > = ({ minBounds$ }) => ({
   scrollingOnTop: false,
 
-  fixed: forwardRef(function SpotlightLandscapeLayoutFixed(
-    { model, Slot },
+  fixed: function SpotlightLandscapeLayoutFixed({
     ref,
-  ) {
+    model,
+    Slot,
+  }): ReactNode {
     useUpdateLayout();
     useObservableEagerState(minBounds$);
 
@@ -43,12 +44,13 @@ export const makeSpotlightLandscapeLayout: CallLayout<
         <div className={styles.grid} />
       </div>
     );
-  }),
+  },
 
-  scrolling: forwardRef(function SpotlightLandscapeLayoutScrolling(
-    { model, Slot },
+  scrolling: function SpotlightLandscapeLayoutScrolling({
     ref,
-  ) {
+    model,
+    Slot,
+  }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
     useObservableEagerState(minBounds$);
@@ -69,5 +71,5 @@ export const makeSpotlightLandscapeLayout: CallLayout<
         </div>
       </div>
     );
-  }),
+  },
 });

src/grid/SpotlightPortraitLayout.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type CSSProperties, forwardRef } from "react";
+import { type ReactNode, type CSSProperties } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
@@ -30,10 +30,11 @@ export const makeSpotlightPortraitLayout: CallLayout<
 > = ({ minBounds$ }) => ({
   scrollingOnTop: false,
 
-  fixed: forwardRef(function SpotlightPortraitLayoutFixed(
-    { model, Slot },
+  fixed: function SpotlightPortraitLayoutFixed({
     ref,
-  ) {
+    model,
+    Slot,
+  }): ReactNode {
     useUpdateLayout();
 
     return (
@@ -47,12 +48,13 @@ export const makeSpotlightPortraitLayout: CallLayout<
         </div>
       </div>
     );
-  }),
+  },
 
-  scrolling: forwardRef(function SpotlightPortraitLayoutScrolling(
-    { model, Slot },
+  scrolling: function SpotlightPortraitLayoutScrolling({
     ref,
-  ) {
+    model,
+    Slot,
+  }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
     const { width } = useObservableEagerState(minBounds$);
@@ -90,5 +92,5 @@ export const makeSpotlightPortraitLayout: CallLayout<
         </div>
       </div>
     );
-  }),
+  },
 });