Improve typings [v3]

[layershifter]

Bug Report

Steps

While v3 supports native ref forwarding, typings should be updated to reflect this.

Expected Result

Typings work as expected.

Actual Result

TS2769: No overload matches this call.   Overload 1 of 2, '(props: ButtonProps | Readonly<ButtonProps>): Button', gave the following error.     Type 'MutableRefObject<HTMLButtonElement | undefined>' is not assignable to type 'LegacyRef<Button> | undefined'.       Type 'MutableRefObject<HTMLButtonElement | undefined>' is not assignable to type 'RefObject<Button>'.

Parameter 'el' implicitly has an 'any' type, but a better type may be inferred from usage.ts(7044)

Version

3.0.0-beta.0

Testcase

https://codesandbox.io/s/semantic-ui-example-forked-9spw8n?file=/example.tsx

[layershifter]

Actions

• [ ] Add new type ForwardRefComponent

  // src/generic.d.ts
  
  + type ForwardRefComponent<P, T> = React.ForwardRefExoticComponent<P & React.RefAttributes<T>>

• [ ] Migrate every component to use this type (Portal is exception) (examples below)

  // src/elements/Button/Button.d.ts
  
  import {
  + ForwardRefComponent,
  SemanticCOLORS,
  SemanticFLOATS,
  SemanticShorthandContent,
  SemanticShorthandItem,
  SemanticSIZES,
  } from '../../generic'
  
  // ---
  
  -declare class Button extends React.Component<ButtonProps> {
  -  static Content: typeof ButtonContent
  -  static Group: typeof ButtonGroup
  -  static Or: typeof ButtonOr
  -
  -  focus: (options?: FocusOptions) => void
  -}
  +declare const Button: ForwardRefComponent<ButtonProps, HTMLButtonElement> & {
  +  Content: typeof ButtonContent
  +  Group: typeof ButtonGroup
  +  Or: typeof ButtonOr
  +}

  // src/elements/Container/Container.d.ts
  -import { SemanticShorthandContent, SemanticTEXTALIGNMENTS } from '../../generic'
  +import { SemanticShorthandContent, SemanticTEXTALIGNMENTS, ForwardRefComponent } from '../../generic'
  
  // ---
  
  -declare const Container: React.FC<ContainerProps>
  +declare const Container: ForwardRefComponent<ContainerProps, HTMLDivElement>

• [ ] update conformance tests [description TBD]

[layershifter]

Released in 3.0.0-beta.2 🎉