Fix flood of TSC errors

Author: DaneEveritt

resources/scripts/components/dashboard/forms/DisableTOTPDialog.tsx

@@ -48,7 +48,7 @@ const DisableTOTPDialog = () => {
                 type={'password'}
                 variant={Input.Text.Variants.Loose}
                 value={password}
-                onChange={(e) => setPassword(e.currentTarget.value)}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.currentTarget.value)}
             />
             <Dialog.Footer>
                 <Button.Text onClick={close}>Cancel</Button.Text>

resources/scripts/components/dashboard/forms/SetupTOTPDialog.tsx

@@ -81,7 +81,7 @@ const ConfigureTwoFactorForm = ({ onTokens }: Props) => {
                 aria-labelledby={'totp-code-description'}
                 variant={Input.Text.Variants.Loose}
                 value={value}
-                onChange={(e) => setValue(e.currentTarget.value)}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.currentTarget.value)}
                 className={'mt-3'}
                 placeholder={'000000'}
                 type={'text'}
@@ -97,7 +97,7 @@ const ConfigureTwoFactorForm = ({ onTokens }: Props) => {
                 className={'mt-1'}
                 type={'password'}
                 value={password}
-                onChange={(e) => setPassword(e.currentTarget.value)}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.currentTarget.value)}
             />
             <Dialog.Footer>
                 <Button.Text onClick={close}>Cancel</Button.Text>

resources/scripts/components/elements/Translate.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Trans, TransProps, useTranslation } from 'react-i18next';
+import { Trans, TransSelectorProps, useTranslation } from 'react-i18next';
 
-type Props = Omit<TransProps, 't'>;
+type Props = Omit<TransSelectorProps<any, any>, 't'>;
 
 export default ({ ns, children, ...props }: Props) => {
     const { t } = useTranslation(ns);

resources/scripts/components/elements/inputs/InputField.tsx

@@ -8,22 +8,20 @@ enum Variant {
     Loose,
 }
 
-interface InputFieldProps extends React.ComponentProps<'input'> {
-    variant?: Variant;
-}
-
-const Component = forwardRef<HTMLInputElement, InputFieldProps>(({ className, variant, ...props }, ref) => (
-    <input
-        ref={ref}
-        className={classNames(
-            'form-input',
-            styles.text_input,
-            { [styles.loose]: variant === Variant.Loose },
-            className
-        )}
-        {...props}
-    />
-));
+const Component = forwardRef<HTMLInputElement, React.ComponentProps<'input'> & { variant?: Variant }>(
+    ({ className, variant, ...props }, ref) => (
+        <input
+            ref={ref}
+            className={classNames(
+                'form-input',
+                styles.text_input,
+                { [styles.loose]: variant === Variant.Loose },
+                className
+            )}
+            {...props}
+        />
+    )
+);
 
 const InputField = Object.assign(Component, { Variants: Variant });
 

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es2015",
     "module": "es2020",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "moduleResolution": "node",
     "lib": [
       "es2015",