convert forwardRef to ref-as-prop

https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop

extension/data/components/controls/ActionButton.tsx

@@ -1,24 +1,20 @@
-import {type ComponentPropsWithoutRef, forwardRef} from 'react';
+import {type ComponentPropsWithRef} from 'react';
 import {classes} from '../../util/ui_interop';
 import css from './ActionButton.module.css';
 
-export const ActionButton = forwardRef<
-    HTMLButtonElement,
-    ComponentPropsWithoutRef<'button'> & {
-        inline?: boolean;
-    }
->(({
+export const ActionButton = ({
     inline,
     className,
     ...props
-}, ref) => (
+}: ComponentPropsWithRef<'button'> & {
+    inline?: boolean;
+}) => (
     <button
         className={classes(
             css.actionButton,
             inline && css.inline,
             className,
         )}
         {...props}
-        ref={ref}
     />
-));
+);

extension/data/components/controls/ActionSelect.tsx

@@ -1,24 +1,20 @@
-import {type ComponentPropsWithoutRef, forwardRef} from 'react';
+import {type ComponentPropsWithRef} from 'react';
 import {classes} from '../../util/ui_interop';
 import css from './ActionSelect.module.css';
 
-export const ActionSelect = forwardRef<
-    HTMLSelectElement,
-    ComponentPropsWithoutRef<'select'> & {
-        inline?: boolean;
-    }
->(({
+export const ActionSelect = ({
     inline,
     className,
     ...props
-}, ref) => (
+}: ComponentPropsWithRef<'select'> & {
+    inline?: boolean;
+}) => (
     <select
         className={classes(
             css.actionSelect,
             inline && css.inline,
             className,
         )}
         {...props}
-        ref={ref}
     />
-));
+);

extension/data/components/controls/BracketButton.tsx

@@ -1,20 +1,16 @@
-import {type ComponentPropsWithoutRef, forwardRef} from 'react';
+import {type ComponentPropsWithRef} from 'react';
 import {classes} from '../../util/ui_interop';
 import css from './BracketButton.module.css';
 
-export const BracketButton = forwardRef<
-    HTMLButtonElement,
-    ComponentPropsWithoutRef<'button'> & {
-        inline?: boolean;
-    }
->(({
+export const BracketButton = ({
     inline,
     className,
     ...props
-}, ref) => (
+}: ComponentPropsWithRef<'button'> & {
+    inline?: boolean;
+}) => (
     <button
         className={classes(css.bracketButton, className)}
         {...props}
-        ref={ref}
     />
-));
+);

extension/data/components/controls/GeneralButton.tsx

@@ -1,20 +1,16 @@
-import {type ComponentPropsWithoutRef, forwardRef} from 'react';
+import {type ComponentPropsWithRef} from 'react';
 import {classes} from '../../util/ui_interop';
 import css from './GeneralButton.module.css';
 
-export const GeneralButton = forwardRef<
-    HTMLButtonElement,
-    ComponentPropsWithoutRef<'button'> & {
-        inline?: boolean;
-    }
->(({
+export const GeneralButton = ({
     inline,
     className,
     ...props
-}, ref) => (
+}: ComponentPropsWithRef<'button'> & {
+    inline?: boolean;
+}) => (
     <button
         className={classes(css.generalButton, className)}
         {...props}
-        ref={ref}
     />
-));
+);

extension/data/components/controls/NormalInput.tsx

@@ -1,25 +1,21 @@
-import {type ComponentPropsWithoutRef, forwardRef} from 'react';
+import {type ComponentPropsWithRef} from 'react';
 import {classes} from '../../util/ui_interop';
 import css from './NormalInput.module.css';
 
 // TODO: this is a terrible name
-export const NormalInput = forwardRef<
-    HTMLInputElement,
-    ComponentPropsWithoutRef<'input'> & {
-        inFooter?: boolean;
-    }
->(({
+export const NormalInput = ({
     inFooter,
     className,
     ...props
-}, ref) => (
+}: ComponentPropsWithRef<'input'> & {
+    inFooter?: boolean;
+}) => (
     <input
         className={classes(
             css.normalInput,
             inFooter && css.inWindowFooter,
             className,
         )}
         {...props}
-        ref={ref}
     />
-));
+);