Fix problem with generic form inputs props on Field in redux-form (#18276)

* Refactor some of the definitions for v7

* Add definitions for formValues decorator

* Refactor definitions for Field, Fields, FieldArray, add tests

* Add files to tsconfig

* Fix immutable version of exports

* Clean up the code, change some types

* Add improvement to generic components

* Remove accidentally added files

* Remove conflicting tests file

types/redux-form/lib/Field.d.ts

@@ -4,7 +4,10 @@ import {
     ReactElement,
     ChangeEvent,
     DragEvent,
-    FocusEvent
+    FocusEvent,
+    InputHTMLAttributes,
+    SelectHTMLAttributes,
+    TextareaHTMLAttributes
 } from "react";
 import { Dispatch } from "redux";
 
@@ -34,7 +37,7 @@ interface BaseFieldProps<P = {}> extends Partial<CommonFieldProps> {
     withRef?: boolean;
 }
 
-export interface GenericField<P> extends Component<BaseFieldProps & P> {
+export interface GenericField<P> extends Component<BaseFieldProps<P> & P> {
     dirty: boolean;
     name: string;
     pristine: boolean;
@@ -42,12 +45,14 @@ export interface GenericField<P> extends Component<BaseFieldProps & P> {
     getRenderedComponent(): Component<WrappedFieldProps & P>;
 }
 
-export class Field extends Component<BaseFieldProps> implements GenericField<any> {
+type GenericFieldHTMLAttributes = InputHTMLAttributes<HTMLInputElement> | SelectHTMLAttributes<HTMLSelectElement> | TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export class Field<P = GenericFieldHTMLAttributes> extends Component<BaseFieldProps<P> & P> implements GenericField<P> {
     dirty: boolean;
     name: string;
     pristine: boolean;
     value: any;
-    getRenderedComponent(): Component<any>;
+    getRenderedComponent(): Component<WrappedFieldProps & P>;
 }
 
 interface WrappedFieldProps {

types/redux-form/lib/FieldArray.d.ts

@@ -11,16 +11,16 @@ interface BaseFieldArrayProps<P = {}> {
     rerenderOnEveryChange?: boolean;
 }
 
-export interface GenericFieldArray<Field, P = {}> extends Component<BaseFieldArrayProps & P> {
+export interface GenericFieldArray<Field, P = {}> extends Component<BaseFieldArrayProps<P> & P> {
     name: string;
     valid: boolean;
     getRenderedComponent(): Component<WrappedFieldArrayProps<Field> & P>;
 }
 
-export class FieldArray extends Component<BaseFieldArrayProps> implements GenericFieldArray<any> {
+export class FieldArray<P = {}> extends Component<BaseFieldArrayProps<P> & P> implements GenericFieldArray<any, P> {
     name: string;
     valid: boolean;
-    getRenderedComponent(): Component<WrappedFieldArrayProps<any>>;
+    getRenderedComponent(): Component<WrappedFieldArrayProps<any> & P>;
 }
 
 interface WrappedFieldArrayProps<FieldValue> {

types/redux-form/lib/Fields.d.ts

@@ -10,20 +10,20 @@ interface BaseFieldsProps<P = {}> {
     withRef?: boolean;
 }
 
-export interface GenericFields<P> extends Component<BaseFieldsProps & P> {
+export interface GenericFields<P> extends Component<BaseFieldsProps<P> & P> {
     dirty: boolean;
     names: string[];
     pristine: boolean;
     values: { [name: string]: any };
-    getRenderedComponent(): Component<BaseFieldsProps & P>;
+    getRenderedComponent(): Component<BaseFieldsProps & WrappedFieldsProps & P>;
 }
 
-export class Fields extends Component<BaseFieldsProps> implements GenericFields<any> {
+export class Fields<P = {}> extends Component<BaseFieldsProps<P> & P> implements GenericFields<P> {
     dirty: boolean;
     names: string[];
     pristine: boolean;
     values: { [name: string]: any };
-    getRenderedComponent(): Component<any>;
+    getRenderedComponent(): Component<BaseFieldsProps & WrappedFieldsProps & P>;
 }
 
 interface WrappedFieldsProps {

types/redux-form/redux-form-tests.tsx

@@ -172,6 +172,7 @@ const Test = reduxForm({
                         <FormSection name="test2">
                             <Field
                                 name="field1"
+                                type="email"
                                 component="input"
                             />