React 19 (#1020)

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}
     />
-));
+);

extension/data/modules/modnotes.jsx

@@ -405,11 +405,7 @@ function ModNotesPopup ({
     }
 
     // Handle note creation
-    async function handleNewNoteSubmit (event) {
-        // don't actually perform the HTML form action
-        event.preventDefault();
-        const formData = new FormData(event.target);
-
+    async function submitNewNote (formData) {
         try {
             await TBApi.createModNote({
                 user,
@@ -439,7 +435,7 @@ function ModNotesPopup ({
     }, []);
 
     const popupFooter = (
-        <form className={css.modnoteCreateForm} onSubmit={handleNewNoteSubmit}>
+        <form className={css.modnoteCreateForm} action={submitNewNote}>
             <ActionSelect
                 name='label'
                 defaultValue={defaultNoteLabelValueToLabelType[defaultNoteLabel]}