From 0c27610119dd44b09334f8dfbbe58aea07873438 Mon Sep 17 00:00:00 2001 From: Robin Date: Mon, 23 Jun 2025 22:48:37 -0400 Subject: [PATCH] Remove usages of forwardRef It has been deprecated in React 19, which allows functional components to receive refs just like any other prop. --- src/Header.tsx | 37 ++- src/button/Link.tsx | 33 +-- src/button/LinkButton.tsx | 20 +- src/form/Form.tsx | 32 +- src/grid/Grid.tsx | 22 +- src/grid/GridLayout.tsx | 15 +- src/grid/OneOnOneLayout.tsx | 10 +- src/grid/SpotlightExpandedLayout.tsx | 20 +- src/grid/SpotlightLandscapeLayout.tsx | 20 +- src/grid/SpotlightPortraitLayout.tsx | 20 +- src/input/Input.tsx | 154 +++++----- src/room/InCallView.tsx | 18 +- src/tile/GridTile.tsx | 396 ++++++++++++------------- src/tile/MediaView.tsx | 228 +++++++-------- src/tile/SpotlightTile.tsx | 406 +++++++++++++------------- src/useMergedRefs.ts | 6 +- 16 files changed, 712 insertions(+), 725 deletions(-) diff --git a/src/Header.tsx b/src/Header.tsx index 89455411..577410f8 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -6,12 +6,7 @@ Please see LICENSE in the repository root for full details. */ import classNames from "classnames"; -import { - type FC, - type HTMLAttributes, - type ReactNode, - forwardRef, -} from "react"; +import { type Ref, type FC, type HTMLAttributes, type ReactNode } from "react"; import { Link } from "react-router-dom"; import { useTranslation } from "react-i18next"; import { Heading, Text } from "@vector-im/compound-web"; @@ -24,23 +19,27 @@ import { EncryptionLock } from "./room/EncryptionLock"; import { useMediaQuery } from "./useMediaQuery"; interface HeaderProps extends HTMLAttributes { + ref?: Ref; children: ReactNode; className?: string; } -export const Header = forwardRef( - ({ children, className, ...rest }, ref) => { - return ( -
- {children} -
- ); - }, -); +export const Header: FC = ({ + ref, + children, + className, + ...rest +}) => { + return ( +
+ {children} +
+ ); +}; Header.displayName = "Header"; diff --git a/src/button/Link.tsx b/src/button/Link.tsx index 987bcea3..17e62a69 100644 --- a/src/button/Link.tsx +++ b/src/button/Link.tsx @@ -5,11 +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 ComponentPropsWithoutRef, - forwardRef, - type MouseEvent, -} from "react"; +import { type ComponentProps, type FC, type MouseEvent } from "react"; import { Link as CpdLink } from "@vector-im/compound-web"; import { type LinkProps, useHref, useLinkClickHandler } from "react-router-dom"; import classNames from "classnames"; @@ -26,31 +22,30 @@ export function useLink( return [href, onClick]; } -type Props = Omit< - ComponentPropsWithoutRef, - "href" | "onClick" -> & { to: LinkProps["to"]; state?: unknown }; +type Props = Omit, "href" | "onClick"> & { + to: LinkProps["to"]; + state?: unknown; +}; /** * A version of Compound's link component that integrates with our router setup. * This is only for app-internal links. */ -export const Link = forwardRef(function Link( - { to, state, ...props }, - ref, -) { +export const Link: FC = ({ ref, to, state, ...props }) => { const [path, onClick] = useLink(to, state); return ; -}); +}; /** * A link to an external web page, made to fit into blocks of text more subtly * than the normal Compound link component. */ -export const ExternalLink = forwardRef< - HTMLAnchorElement, - ComponentPropsWithoutRef<"a"> ->(function ExternalLink({ className, children, ...props }, ref) { +export const ExternalLink: FC> = ({ + ref, + className, + children, + ...props +}) => { return ( ); -}); +}; diff --git a/src/button/LinkButton.tsx b/src/button/LinkButton.tsx index a4fc3211..f904c9d0 100644 --- a/src/button/LinkButton.tsx +++ b/src/button/LinkButton.tsx @@ -5,24 +5,22 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE in the repository root for full details. */ -import { type ComponentPropsWithoutRef, forwardRef } from "react"; +import { type ComponentProps, type FC } from "react"; import { Button } from "@vector-im/compound-web"; import type { LinkProps } from "react-router-dom"; import { useLink } from "./Link"; -type Props = Omit< - ComponentPropsWithoutRef>, - "as" | "href" -> & { to: LinkProps["to"]; state?: unknown }; +type Props = Omit>, "as" | "href"> & { + to: LinkProps["to"]; + state?: unknown; +}; /** * A version of Compound's button component that acts as a link and integrates * with our router setup. */ -export const LinkButton = forwardRef( - function LinkButton({ to, state, ...props }, ref) { - const [path, onClick] = useLink(to, state); - return