fix(types): more accurate form types (#5067)

* fix(types): more accurate form types

* WIP

* amend

package.json

@@ -15,7 +15,7 @@
     "build": "node tools/build.js",
     "build-docs": "yarn --cwd www build",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
-    "dtslint": "dtslint types",
+    "dtslint": "dtslint types --expectOnly",
     "format": "eslint . --fix && npm run prettier -- --write",
     "lint": "eslint . && npm run prettier -- -l",
     "deploy-docs": "yarn --cwd www deploy",

types/components/Accordion.d.ts

@@ -3,18 +3,17 @@ import * as React from 'react';
 import AccordionCollapse from './AccordionCollapse';
 import AccordionToggle from './AccordionToggle';
 
-import { BsPrefixComponent } from './helpers';
+import { BsPrefixRefForwardingComponent } from './helpers';
 
 export interface AccordionProps {
   activeKey?: string;
   defaultActiveKey?: string;
 }
 
-declare class Accordion<
-  As extends React.ElementType = 'div'
-> extends BsPrefixComponent<As, AccordionProps> {
-  static Toggle: typeof AccordionToggle;
-  static Collapse: typeof AccordionCollapse;
+declare interface Accordion
+  extends BsPrefixRefForwardingComponent<'div', AccordionProps> {
+  Toggle: typeof AccordionToggle;
+  Collapse: typeof AccordionCollapse;
 }
-
+declare const Accordion: Accordion;
 export default Accordion;

types/components/AccordionCollapse.d.ts

 import * as React from 'react';
 
-import Collapse, { CollapseProps } from './Collapse';
+import { CollapseProps } from './Collapse';
 
-import { BsPrefixComponent } from './helpers';
+import { BsPrefixRefForwardingComponent } from './helpers';
 
 export interface AccordionCollapseProps
   extends CollapseProps,
@@ -10,9 +10,8 @@ export interface AccordionCollapseProps
   eventKey: string;
 }
 
-declare class AccordionCollapse extends BsPrefixComponent<
-  typeof Collapse,
-  AccordionCollapseProps
-> {}
+declare interface AccordionCollapse
+  extends BsPrefixRefForwardingComponent<'div', AccordionCollapseProps> {}
+declare const AccordionCollapse: AccordionCollapse;
 
 export default AccordionCollapse;

types/components/AccordionToggle.d.ts

 import * as React from 'react';
 
-import { BsPrefixComponent } from './helpers';
+import { BsPrefixRefForwardingComponent } from './helpers';
 
 export interface AccordionToggleProps {
   eventKey: string;
@@ -12,8 +12,8 @@ export function useAccordionToggle(
   onClick: (event?: React.SyntheticEvent) => void,
 ): (event?: React.SyntheticEvent) => void;
 
-declare class AccordionToggle<
-  As extends React.ElementType = 'button'
-> extends BsPrefixComponent<As, AccordionToggleProps> {}
+declare interface AccordionToggle
+  extends BsPrefixRefForwardingComponent<'div', AccordionToggleProps> {}
+declare const AccordionToggle: AccordionToggle;
 
 export default AccordionToggle;

types/components/DropdownItem.d.ts

 import * as React from 'react';
 
-import SafeAnchor, { SafeAnchorProps } from './SafeAnchor';
+import { SafeAnchorProps } from './SafeAnchor';
 
 import {
   BsPrefixComponent,

types/components/Form.d.ts

@@ -7,28 +7,27 @@ import FormGroup from './FormGroup';
 import FormLabel from './FormLabel';
 import FormText from './FormText';
 
-import { BsPrefixComponent } from './helpers';
+import { BsPrefixComponent, BsPrefixRefForwardingComponent } from './helpers';
 
 export class FormRow<
   As extends React.ElementType = 'div'
 > extends BsPrefixComponent<As> {}
 
 export interface FormProps {
-  innerRef?: React.LegacyRef<this>;
   inline?: boolean;
   validated?: boolean;
 }
 
-declare class Form<
-  As extends React.ElementType = 'form'
-> extends BsPrefixComponent<As, FormProps> {
-  static Row: typeof FormRow;
-  static Group: typeof FormGroup;
-  static Control: typeof FormControl;
-  static Check: typeof FormCheck;
-  static File: typeof FormFile;
-  static Label: typeof FormLabel;
-  static Text: typeof FormText;
+declare interface Form
+  extends BsPrefixRefForwardingComponent<'form', FormProps> {
+  Row: typeof FormRow;
+  Group: typeof FormGroup;
+  Control: typeof FormControl;
+  Check: typeof FormCheck;
+  File: typeof FormFile;
+  Label: typeof FormLabel;
+  Text: typeof FormText;
 }
 
+declare const Form: Form;
 export default Form;

types/components/FormCheck.d.ts

 import * as React from 'react';
 import FormCheckInput from './FormCheckInput';
 import FormCheckLabel from './FormCheckLabel';
-import { BsPrefixComponent } from './helpers';
+import { BsPrefixRefForwardingComponent } from './helpers';
 
 export interface FormCheckProps {
   bsCustomPrefix?: string;
-  innerRef?: React.LegacyRef<this>;
   id?: string;
   inline?: boolean;
   disabled?: boolean;
@@ -18,11 +17,12 @@ export interface FormCheckProps {
   feedback?: React.ReactNode;
 }
 
-declare class FormCheck<
-  As extends React.ElementType = 'input'
-> extends BsPrefixComponent<As, FormCheckProps> {
-  static Input: typeof FormCheckInput;
-  static Label: typeof FormCheckLabel;
+declare interface FormCheck
+  extends BsPrefixRefForwardingComponent<'input', FormCheckProps> {
+  Input: typeof FormCheckInput;
+  Label: typeof FormCheckLabel;
 }
 
+declare const FormCheck: FormCheck;
+
 export default FormCheck;

types/components/FormCheckInput.d.ts

-import * as React from 'react';
-
-import { BsPrefixComponent } from './helpers';
+import { BsPrefixRefForwardingComponent } from './helpers';
 
 export interface FormCheckInputProps {
   id?: string;
@@ -8,11 +6,11 @@ export interface FormCheckInputProps {
   isStatic?: boolean;
   isValid?: boolean;
   isInvalid?: boolean;
-  innerRef?: React.LegacyRef<this>;
 }
 
-declare class FormCheckInput<
-  As extends React.ElementType = 'input'
-> extends BsPrefixComponent<As, FormCheckInputProps> {}
+declare interface FormCheckInput
+  extends BsPrefixRefForwardingComponent<'input', FormCheckInputProps> {}
+
+declare const FormCheckInput: FormCheckInput;
 
 export default FormCheckInput;

types/components/FormCheckLabel.d.ts

-import * as React from 'react';
-
-import { BsPrefixComponent } from './helpers';
+import { BsPrefixRefForwardingComponent } from './helpers';
 
 export interface FormCheckLabelProps {
   htmlFor?: string;
-  innerRef?: React.LegacyRef<this>;
 }
 
-declare class FormCheckLabel extends BsPrefixComponent<
-  'label',
-  FormCheckLabelProps
-> {}
+declare interface FormCheckLabel
+  extends BsPrefixRefForwardingComponent<'label', FormCheckLabelProps> {}
+
+declare const FormCheckLabel: FormCheckLabel;
 
 export default FormCheckLabel;

types/components/FormControl.d.ts

 import * as React from 'react';
 import Feedback from './Feedback';
-import { BsPrefixComponent } from './helpers';
+import { BsPrefixRefForwardingComponent } from './helpers';
 
 type FormControlElement =
   | HTMLInputElement
@@ -8,13 +8,12 @@ type FormControlElement =
   | HTMLTextAreaElement;
 
 export interface FormControlProps {
-  innerRef?: React.LegacyRef<FormControlElement>;
   size?: 'sm' | 'lg';
   plaintext?: boolean;
   readOnly?: boolean;
   disabled?: boolean;
   value?: string | string[] | number;
-  onChange?: React.FormEventHandler<FormControlElement>;
+  onChange?: React.ChangeEventHandler<FormControlElement>;
   custom?: boolean;
   type?: string;
   id?: string;
@@ -22,10 +21,11 @@ export interface FormControlProps {
   isInvalid?: boolean;
 }
 
-declare class FormControl<
-  As extends React.ElementType = 'input'
-> extends BsPrefixComponent<As, FormControlProps> {
-  static Feedback: typeof Feedback;
+declare interface FormControl
+  extends BsPrefixRefForwardingComponent<'input', FormControlProps> {
+  Feedback: typeof Feedback;
 }
 
+declare const FormControl: FormControl;
+
 export default FormControl;

types/components/FormFile.d.ts

 import * as React from 'react';
 import FormFileInput from './FormFileInput';
 import FormFileLabel from './FormFileLabel';
-import { BsPrefixComponent } from './helpers';
+import { BsPrefixRefForwardingComponent } from './helpers';
 
 export interface FormFileProps {
   bsCustomPrefix?: string;
@@ -15,11 +15,12 @@ export interface FormFileProps {
   lang?: string;
 }
 
-declare class FormFile<
-  As extends React.ElementType = 'input'
-> extends BsPrefixComponent<As, FormFileProps> {
-  static Input: typeof FormFileInput;
-  static Label: typeof FormFileLabel;
+declare interface FormFile
+  extends BsPrefixRefForwardingComponent<'input', FormFileProps> {
+  Input: typeof FormFileInput;
+  Label: typeof FormFileLabel;
 }
 
+declare const FormFile: FormFile;
+
 export default FormFile;

types/components/FormFileInput.d.ts

-import * as React from 'react';
-
-import { BsPrefixComponent } from './helpers';
+import { BsPrefixRefForwardingComponent } from './helpers';
 
 export interface FormFileInputProps {
   id?: string;
@@ -9,8 +7,9 @@ export interface FormFileInputProps {
   lang?: string;
 }
 
-declare class FormFileInput<
-  As extends React.ElementType = 'input'
-> extends BsPrefixComponent<As, FormFileInputProps> {}
+declare interface FormFileInput
+  extends BsPrefixRefForwardingComponent<'input', FormFileInputProps> {}
+
+declare const FormFileInput: FormFileInput;
 
 export default FormFileInput;

types/components/FormFileLabel.d.ts

-import * as React from 'react';
-
-import { BsPrefixComponent } from './helpers';
+import { BsPrefixRefForwardingComponent } from './helpers';
 
 export interface FormFileLabelProps {
   htmlFor?: string;
 }
 
-declare class FormFileLabel extends BsPrefixComponent<
-  'label',
-  FormFileLabelProps
-> {}
+declare interface FormFileLabel
+  extends BsPrefixRefForwardingComponent<'label', FormFileLabelProps> {}
+
+declare const FormFileLabel: FormFileLabel;
 
 export default FormFileLabel;

types/components/FormGroup.d.ts

 import * as React from 'react';
-import { BsPrefixComponent } from './helpers';
+import { BsPrefixRefForwardingComponent } from './helpers';
 
 export interface FormGroupProps {
-  innerRef?: React.LegacyRef<this>;
   controlId?: string;
 }
 
-declare class FormGroup<
-  As extends React.ElementType = 'div'
-> extends BsPrefixComponent<As, FormGroupProps> {}
+declare interface FormGroup
+  extends BsPrefixRefForwardingComponent<'div', FormGroupProps> {}
 
+declare const FormGroup: FormGroup;
 export default FormGroup;

types/components/FormLabel.d.ts

@@ -2,11 +2,10 @@ import * as React from 'react';
 
 import { ColProps } from './Col';
 
-import { BsPrefixComponent } from './helpers';
+import { BsPrefixRefForwardingComponent } from './helpers';
 
 interface FormLabelBaseProps {
   htmlFor?: string;
-  innerRef?: React.LegacyRef<this>;
   srOnly?: boolean;
 }
 
@@ -20,8 +19,9 @@ export interface FormLabelWithColProps extends FormLabelBaseProps, ColProps {
 
 export type FormLabelProps = FormLabelWithColProps | FormLabelOwnProps;
 
-declare class FormLabel<
-  As extends React.ElementType = 'label'
-> extends BsPrefixComponent<As, FormLabelProps> {}
+declare interface FormLabel
+  extends BsPrefixRefForwardingComponent<'label', FormLabelProps> {}
+
+declare const FormLabel: FormLabel;
 
 export default FormLabel;

types/components/FormText.d.ts

-import * as React from 'react';
-
-import { BsPrefixComponent } from './helpers';
+import { BsPrefixRefForwardingComponent } from './helpers';
 
 export interface FormTextProps {
-  innerRef?: React.LegacyRef<this>;
   muted?: boolean;
 }
 
-declare class FormText<
-  As extends React.ElementType = 'small'
-> extends BsPrefixComponent<As, FormTextProps> {}
+declare interface FormText
+  extends BsPrefixRefForwardingComponent<'small', FormTextProps> {}
+
+declare const FormText: FormText;
 
 export default FormText;

types/components/helpers.d.ts

@@ -13,6 +13,20 @@ export interface BsPrefixProps<As extends React.ElementType> {
   bsPrefix?: string;
 }
 
+export interface BsPrefixRefForwardingComponent<
+  TInitial extends React.ElementType,
+  P = {}
+> {
+  <As extends React.ElementType = TInitial>(
+    props: React.PropsWithChildren<ReplaceProps<As, BsPrefixProps<As> & P>>,
+    context?: any,
+  ): React.ReactElement | null;
+  propTypes?: any;
+  contextTypes?: any;
+  defaultProps?: Partial<P>;
+  displayName?: string;
+}
+
 export class BsPrefixComponent<
   As extends React.ElementType,
   P = {}

types/simple.test.tsx

@@ -173,8 +173,9 @@ import {
     <Form.Control
       type="email"
       placeholder="name@example.com"
-      innerRef={React.createRef<HTMLInputElement>()}
-      onChange={(e: React.FormEvent<HTMLInputElement>) => {
+      ref={React.createRef<HTMLInputElement>()}
+      onChange={(e) => {
+        // $ExpectType ChangeEvent<FormControlElement>
         e;
       }}
     />
@@ -183,8 +184,8 @@ import {
     <Form.Label>Example select</Form.Label>
     <Form.Control
       as="select"
-      innerRef={React.createRef<HTMLSelectElement>()}
-      onChange={(e: React.FormEvent<HTMLSelectElement>) => {
+      ref={React.createRef<HTMLSelectElement>()}
+      onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
         e;
       }}
     >
@@ -210,8 +211,8 @@ import {
     <Form.Control
       as="textarea"
       rows={3}
-      innerRef={React.createRef<HTMLTextAreaElement>()}
-      onChange={(e: React.FormEvent<HTMLTextAreaElement>) => {
+      ref={React.createRef<HTMLTextAreaElement>()}
+      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
         e;
       }}
     />
@@ -239,6 +240,7 @@ import {
     label="Custom file input"
     custom
   />
+  <Form.File.Input />
 </Form>;
 
 <div>