Replace usage of forwardRef with React 19 ref prop (#29803)

* Replace usage of `forwardRef` with React 19 ref prop

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add lint rule

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/accessibility/Toolbar.tsx

@@ -6,18 +6,20 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { forwardRef } from "react";
+import React, { type Ref, type JSX } from "react";
 
 import { RovingTabIndexProvider } from "./RovingTabIndex";
 import { getKeyBindingsManager } from "../KeyBindingsManager";
 import { KeyBindingAction } from "./KeyboardShortcuts";
 
-interface IProps extends Omit<React.HTMLProps<HTMLDivElement>, "onKeyDown"> {}
+interface IProps extends Omit<React.HTMLProps<HTMLDivElement>, "onKeyDown"> {
+    ref?: Ref<HTMLDivElement>;
+}
 
 // This component implements the Toolbar design pattern from the WAI-ARIA Authoring Practices guidelines.
 // https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar
 // All buttons passed in children must use RovingTabIndex to set `onFocus`, `isActive`, `ref`
-const Toolbar = forwardRef<HTMLDivElement, IProps>(({ children, ...props }, ref) => {
+const Toolbar = ({ children, ref, ...props }: IProps): JSX.Element => {
     const onKeyDown = (ev: React.KeyboardEvent): void => {
         const target = ev.target as HTMLElement;
         // Don't interfere with input default keydown behaviour
@@ -55,6 +57,6 @@ const Toolbar = forwardRef<HTMLDivElement, IProps>(({ children, ...props }, ref)
             )}
         </RovingTabIndexProvider>
     );
-});
+};
 
 export default Toolbar;

src/accessibility/context_menu/ContextMenuButton.tsx

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { forwardRef, type Ref } from "react";
+import React, { type Ref, type JSX } from "react";
 
 import AccessibleButton, { type ButtonProps } from "../../components/views/elements/AccessibleButton";
 
@@ -16,13 +16,19 @@ type Props<T extends keyof HTMLElementTagNameMap> = ButtonProps<T> & {
     label?: string;
     // whether the context menu is currently open
     isExpanded: boolean;
+    ref?: Ref<HTMLElementTagNameMap[T]>;
 };
 
 // Semantic component for representing the AccessibleButton which launches a <ContextMenu />
-export const ContextMenuButton = forwardRef(function <T extends keyof HTMLElementTagNameMap>(
-    { label, isExpanded, children, onClick, onContextMenu, ...props }: Props<T>,
-    ref: Ref<HTMLElementTagNameMap[T]>,
-) {
+export const ContextMenuButton = function <T extends keyof HTMLElementTagNameMap>({
+    label,
+    isExpanded,
+    children,
+    onClick,
+    onContextMenu,
+    ref,
+    ...props
+}: Props<T>): JSX.Element {
     return (
         <AccessibleButton
             {...props}
@@ -36,4 +42,4 @@ export const ContextMenuButton = forwardRef(function <T extends keyof HTMLElemen
             {children}
         </AccessibleButton>
     );
-});
+};

src/accessibility/context_menu/ContextMenuTooltipButton.tsx

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { forwardRef, type Ref } from "react";
+import React, { type JSX } from "react";
 
 import AccessibleButton, { type ButtonProps } from "../../components/views/elements/AccessibleButton";
 
@@ -18,10 +18,14 @@ type Props<T extends keyof HTMLElementTagNameMap> = ButtonProps<T> & {
 };
 
 // Semantic component for representing the AccessibleButton which launches a <ContextMenu />
-export const ContextMenuTooltipButton = forwardRef(function <T extends keyof HTMLElementTagNameMap>(
-    { isExpanded, children, onClick, onContextMenu, ...props }: Props<T>,
-    ref: Ref<HTMLElementTagNameMap[T]>,
-) {
+export const ContextMenuTooltipButton = function <T extends keyof HTMLElementTagNameMap>({
+    isExpanded,
+    children,
+    onClick,
+    onContextMenu,
+    ref,
+    ...props
+}: Props<T>): JSX.Element {
     return (
         <AccessibleButton
             {...props}
@@ -35,4 +39,4 @@ export const ContextMenuTooltipButton = forwardRef(function <T extends keyof HTM
             {children}
         </AccessibleButton>
     );
-});
+};